vike-react-query questions

[kevincrossgrove]

1. Is there any recommended approach for setting the page title dynamically when using vike-react-query? I am using useSuspenseQuery with telefunc, and want to avoid fetching the same data twice, one time just for setting the page title

2. Is there a way to prevent a useSuspenseQuery from refetching (on the server) when the client already has the data for the specific cache key from another page?

[brillout]

1. The plan is to use React's 19 built-int <title> support, see https://github.com/vikejs/vike-react/issues/88. You can also try to implement a solution on user land but note that it isn't trivial, see https://github.com/vikejs/vike-react/issues/67 and https://github.com/vikejs/vike-react/issues/36#issuecomment-1842870621.
2. I think @nitedani (author of vike-react-query) will probably know more about this.

Closing but let's continue the discussion.

[nitedani]

@kevincrossgrove

1. Is there any recommended approach for setting the page title dynamically when using vike-react-query? I am using useSuspenseQuery with telefunc, and want to avoid fetching the same data twice, one time just for setting the page title

useSuspenseQuery deduplicates and caches queries. If you have it at two different places with the same queryKey, it will only do one request.

2. Is there a way to prevent a useSuspenseQuery from refetching (on the server) when the client already has the data for the specific cache key from another page?

You can set refetchOnMount: false - https://tanstack.com/query/latest/docs/framework/react/reference/useQuery Or you can set a higher staleTime on the query: staleTime: 60000 (one minute)

You can also set the QueryClient defaults inside a Vike config file:

// +config.ts

export default {
  ...
  queryClientConfig: {
    defaultOptions: {
      queries: {
        staleTime: 60000,
      },
    },
  },
};

[brillout]

@kevincrossgrove We're adding further documentation at https://github.com/vikejs/vike-react/pull/97. Let us know if you still have questions.

[kevincrossgrove]

@kevincrossgrove

1. Is there any recommended approach for setting the page title dynamically when using vike-react-query? I am using useSuspenseQuery with telefunc, and want to avoid fetching the same data twice, one time just for setting the page title

useSuspenseQuery deduplicates and caches queries. If you have it at two different places with the same queryKey, it will only do one request.

2. Is there a way to prevent a useSuspenseQuery from refetching (on the server) when the client already has the data for the specific cache key from another page?

You can set refetchOnMount: false - https://tanstack.com/query/latest/docs/framework/react/reference/useQuery Or you can set a higher staleTime on the query: staleTime: 60000 (one minute)

You can also set the QueryClient defaults inside a Vike config file:

// +config.ts

export default {
  ...
  queryClientConfig: {
    defaultOptions: {
      queries: {
        staleTime: 60000,
      },
    },
  },
};

@nitedani Thank you very much. Both are excellent solutions

[kevincrossgrove]

1. The plan is to use React's 19 built-int <title> support, see React 19 #88. You can also try to implement a solution on user land but note that it isn't trivial, see New component hook useHead() #67 and useId() unusable with SSR #36 (comment).
2. I think @nitedani (author of vike-react-query) will probably know more about this.

Closing but let's continue the discussion.

@brillout Thank you for your response on #1, but these solutions will only change the page title after loading the page correct?

I need the title to appear correctly when links are shared for these dynamic pages. I would also benefit from being able to set other metadata like description, openGraph metadata. I am okay with removing telefunc if needed

[brillout]

Actually, I'm currently working on https://github.com/vikejs/vike-react/issues/67. This will/should address your issues. I'll pre-release it sooner rather than later (ETA sometime this week).