deferStream: false not working w/ A

[chris-carrington]

Describe the bug

createAsync & createAsyncStore w/ defer false, work fantastic on page refresh but does not work w/ solid router's A component, when clicking A the entire page holds till the api call completes,

Your Example Website or App

About.tsx is included in reproduce

Steps to Reproduce the Bug or Issue

1. npm create solid@latest
2. Update the About.tsx to the small example below which includes an 1800ms api call to jsonplaceholder
3. Navigate to /about?to=1
4. Notice on first load we see <h1>About</h1> immediately
5. Click <A href="/about?to=2">to 2</A>
6. Notice the navigation waits for the api call
7. Comment the Suspense > Click the links > & notice how the navigation is now instant

import { Suspense } from 'solid-js'
import { Title } from '@solidjs/meta'
import { A, createAsync, createAsyncStore, query, useSearchParams } from '@solidjs/router'

export default function About() {
  const resQuery = query(callAPI, 'callAPI')

  const resAsync = createAsync(
  // const resAsync = createAsyncStore(
    () => resQuery({ pathParams: { id: Number(useSearchParams()[0]?.to) } }),
    { deferStream: false }
    // { deferStream: false, reconcile: { merge: true } }
  )

  return <>
    <main style={`background-color: ${Number(useSearchParams()[0]?.to) === 1 ? 'green' : 'red'}`}>
      <Title>About</Title>
      <h1>About</h1>

      <Suspense>
        <p>{JSON.stringify(resAsync())}</p>
      </Suspense>

      <A href="/about?to=1">to 1</A>
      <A href="/about?to=2">to 2</A>
    </main>
  </>
}

async function callAPI(req: Req): Promise<ApiResult<Res>> {
  await new Promise(resolve => setTimeout(resolve, 1800));

  try {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts/${req.pathParams.id}`
    )

    if (!response.ok) {
      return { error: `Failed to fetch post ID ${req.pathParams.id}` }
    }

    const res = await response.json()
    res.now = Date.now()
    return { data: res }

  } catch (err: any) {
    return { error: err.message ?? 'Unknown error' }
  }
}


type Req = {
  body?: undefined,
  searchParams?: undefined,
  pathParams: { id: number }
}

type Res = {
  userId: number
  id: number
  title: string
  body: string,
  now: string,
}

type ApiOk<T> = { data: T, error?: never }
type ApiErr = { error: string, data?: never }
type ApiResult<T> = ApiOk<T> | ApiErr

Expected behavior

Anchor click behavior = Page refresh behavior (Immediately see all outside Suspense like the h1)

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: solid@latest

Additional context

Solid = The Goat!