Prefetch a query, then skip fetching when using the query

In order to avoid loading states I'm prefetching a query before navigating to a new screen. On that screen I'm using the query. If add a log to the

queryFn

queryFn

I see it's being called when prefetched (as expected) and then again in the component calling

useQuery

useQuery

(not as intended).

I'm new to this library, is there a way I can set a cache setting or something so that I can avoid the second call when navigating but still get the benefits of

useQuery

useQuery

for refetching afterwards?

Component that does the prefetching:

import { queryKey, queryFn } from './MyScreen

export default function Prefetcher() {
  const queryClient = useQueryClient();

  return (
    <Button
      onPress={async () => {
        await queryClient.prefetchQuery(queryKey, queryFn)
        navigateToMyScreen()
      }}
    >
      Prefetch, then navigate
    </Button>
  )
}

import { queryKey, queryFn } from './MyScreen

export default function Prefetcher() {
  const queryClient = useQueryClient();

  return (
    <Button
      onPress={async () => {
        await queryClient.prefetchQuery(queryKey, queryFn)
        navigateToMyScreen()
      }}
    >
      Prefetch, then navigate
    </Button>
  )
}

Screen using the query

export const queryKey = ['my-screen']

export async function queryFn() {
  // ...
}

export default function MyScreen() {
  // 👇🏻 I want to skip this fetching immediately after I have just prefetched
  const { data } = useQuery({ queryKey, queryFn })

  // Use the data...
}

export const queryKey = ['my-screen']

export async function queryFn() {
  // ...
}

export default function MyScreen() {
  // 👇🏻 I want to skip this fetching immediately after I have just prefetched
  const { data } = useQuery({ queryKey, queryFn })

  // Use the data...
}

TanStack•4y ago•

5 replies

slow-yellow

Prefetch a query, then skip fetching when using the query

In order to avoid loading states I'm prefetching a query before navigating to a new screen. On that screen I'm using the query. If add a log to the

queryFn

queryFn

I see it's being called when prefetched (as expected) and then again in the component calling

useQuery

useQuery

(not as intended).

I'm new to this library, is there a way I can set a cache setting or something so that I can avoid the second call when navigating but still get the benefits of

useQuery

useQuery

for refetching afterwards?

Component that does the prefetching:

import { queryKey, queryFn } from './MyScreen

export default function Prefetcher() {
  const queryClient = useQueryClient();

  return (
    <Button
      onPress={async () => {
        await queryClient.prefetchQuery(queryKey, queryFn)
        navigateToMyScreen()
      }}
    >
      Prefetch, then navigate
    </Button>
  )
}

import { queryKey, queryFn } from './MyScreen

export default function Prefetcher() {
  const queryClient = useQueryClient();

  return (
    <Button
      onPress={async () => {
        await queryClient.prefetchQuery(queryKey, queryFn)
        navigateToMyScreen()
      }}
    >
      Prefetch, then navigate
    </Button>
  )
}

Screen using the query

export const queryKey = ['my-screen']

export async function queryFn() {
  // ...
}

export default function MyScreen() {
  // 👇🏻 I want to skip this fetching immediately after I have just prefetched
  const { data } = useQuery({ queryKey, queryFn })

  // Use the data...
}

export const queryKey = ['my-screen']

export async function queryFn() {
  // ...
}

export default function MyScreen() {
  // 👇🏻 I want to skip this fetching immediately after I have just prefetched
  const { data } = useQuery({ queryKey, queryFn })

  // Use the data...
}

Prefetch a query, then skip fetching when using the query

Similar Threads

Prefetch a query, then skip fetching when using the query

Similar Threads

Similar Threads

Similar Threads