Closed kevincrossgrove closed 6 months ago
<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.vike-react-query
) will probably know more about this.Closing but let's continue the discussion.
@kevincrossgrove
1. Is there any recommended approach for setting the page title dynamically when using
vike-react-query
? I am usinguseSuspenseQuery
withtelefunc
, 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,
},
},
},
};
@kevincrossgrove We're adding further documentation at https://github.com/vikejs/vike-react/pull/97. Let us know if you still have questions.
@kevincrossgrove
- Is there any recommended approach for setting the page title dynamically when using
vike-react-query
? I am usinguseSuspenseQuery
withtelefunc
, 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 samequeryKey
, it will only do one request.
- 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 higherstaleTime
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
- 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 hookuseHead()
 #67 anduseId()
unusable with SSRÂ #36 (comment).- 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
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).
Is there any recommended approach for setting the page title dynamically when using
vike-react-query
? I am usinguseSuspenseQuery
withtelefunc
, and want to avoid fetching the same data twice, one time just for setting the page titleIs 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?