T
TanStack•3y ago
subsequent-cyan

SSR prefetchQuery partial key

hi client side I have 
useQuery(['foo', isAuth], fetcher)
useQuery(['foo', isAuth], fetcher)
I'd like to prefetch it server side, so I'm doing the following: 
prefetchQuery(['foo'], fetcher)
prefetchQuery(['foo'], fetcher)
unfortunately I need to specify the exact query to prefetch it how can I achieve this as I do not have the auth state server side? can I specify a partial key server side? thanks!
4 Replies
wise-white
wise-white•3y ago
what's the use-case?
subsequent-cyan
subsequent-cyanOP•3y ago
here's my page: 
const Foo = () => {
  const isAuth = useAuth()
  const {data} = useQuery(['foo', isAuth], fetcher)

  if (!data) {
    return null
  }
  
  return <Data data={data} />

export const getStaticProps = async () => {
  await queryClient.prefetchQuery(['foo', false], fetcher)

  return { dehydratedState }
}

export default Foo
const Foo = () => {
  const isAuth = useAuth()
  const {data} = useQuery(['foo', isAuth], fetcher)

  if (!data) {
    return null
  }
  
  return <Data data={data} />

export const getStaticProps = async () => {
  await queryClient.prefetchQuery(['foo', false], fetcher)

  return { dehydratedState }
}

export default Foo
on the first load my page is correct as I get the data from the server, however my user is not auth right away as auth state is refreshed client side , then the auth is processed and the query key is updated to ['foo', true] so I dont have data anymore and my page renders null while the data is fetched. I was thinking about switching the query key server side to a partial one: 
{queryKey: ['foo']}
{queryKey: ['foo']}
but by this time I did not understand completely how prefetchQuery works, now I believe I do a bit more and I imagine the issue here is more related to my logic of rendering the page but, in the end my query key will be updated as I dont need anymore the isAuth in the key and it should fix my issue hope I was clear!
wise-white
wise-white•3y ago
I guess you just want keepPreviousData ? It doesn't make much sense to me to have the same data in the cache for both isAuth and not isAuth. If that's what you want, you could just not use isAuth for this request at all ...
subsequent-cyan
subsequent-cyanOP•3y ago
I even think I could have use the keepPreviousData yup

Did you find this page helpful?