useLoaderData vs useSuspenseQuery

[guy-ecton]

I've set up a component loader with react-query (as shown in the documentation), but I "forgot" to change the component itself, and I kept it with useLoaderData().

loader: async ({ context: { quernClient } }) => queryClient.ensureQueryData(getPostsOptions)

// ....
function Comp() {
  const posts = useLoaderData()
}

To my surprise, it worked. posts contained the output I expected.

If my loader returns more than 1 key (like a promise and a primitive), using useSuspenseQuery in the component seems limiting, as it is tightly bound to react-query.

So, which should we use?
Thanks

[TkDodo]

with the shown code, you will only ever fetch data once and never re-validate, because that's what ensureQueryData does. Also, without useQuery or useSuspenseQuery, there is no query subscription, so your data is eligible for garbage collection.

The way I use it is with useSuspenseQuery and I don't useLoaderData() at all. In fact, I don't return anything from the loader so that it can't be used accidentally. For me, the loader is the place to seed the cache.

[max-programming]

@TkDodo Right now the problem I am facing is that when I make the loader async, the Suspense component does not render any fallback, and it waits for the data to fetch like a normal useLoaderData. Although I am using useSuspenseQuery

It's fine if I don't want anything out of the loader but I need a title from the loader in the head

How can I achieve this?
Here's some code for reference

Non Async Loader - Works Great with Suspense and useSuspenseQuery

  loader({ context, params, deps }) {
    const { chatId } = params;
    context.queryClient.ensureQueryData(queries.chats.withMessages(chatId));
  },
  head() {
    return {
      meta: [
        {
          title: `New Chat | Chat Assistant`, // No dynamic title
        },
      ],
    };
  },

Async Loader - Does not show Suspense fallback and acts like useLoaderData

  async loader({ context, params, deps }) {
    const { chatId } = params;
    const { chat } = await context.queryClient.ensureQueryData(queries.chats.withMessages(chatId));
    return { title: chat.title }
  },
  head({ loaderData }) {
    return {
      meta: [
        {
          title: `${loaderData?.title ?? "New Chat"} | Chat Assistant`, // Dynamic title
        },
      ],
    };
  },

[conficiusa]

same issue . suspense fallback not rendering

[schiller-manuel]

you cannot have both. either block via awating in the loader, then you have loader data you can use in head
if you are not awaiting in the loader, you cannot access the loader data in head as head is built before the initial response is returned to the client, and your data streams in later.

[TkDodo]

@max-programming the original question as about router, but your code snippet indicates you’re using start, so there’s a difference. You need to await in the loader and useLoaderData if you want that information available in head afaik.

[max-programming]

@TkDodo I understand. But check out this example

You will notice clicking on "Deferred" link, it shows Suspense fallback properly
But upon clicking "Deferred (Failing)" link, it waits for the page to fully load and Suspense fallback is never shown

The only difference between the two routes is the failing one has async await on the loader
Is there a way to tackle this issue? That are able to use await along with suspense fallback