ambitious-aqua

how to "pause" queries globally?

I am currently using nextjs page router with react and I am looking for a way to pause all queries on the current page. Below is the use case: 1) I have 10+ queries on the page that is dependent on a location_id param as the query key 2) A user can switch user by clicking on a button on the page which triggers a mutation POST call that updates the location_id in the database and then routes the user to a different page after the mutation completes. The problem I am running into is the location_id value changes before the routing completes and the 10+ queries on the page are now fetching for new data even though those 90% of those queries won't be used once the user is navigated away from the page after the location_id value changes. I was wondering what would be the best way to handle this type of scenario. Thank you!

8 Replies

optimistic-gold•10mo ago

Something in here should help https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation

Query Cancellation | TanStack Query React Docs

TanStack Query provides each query function with an . When a query becomes out-of-date or inactive, this signal will become aborted. This means that all queries are cancellable, and you can respond to...

optimistic-gold•10mo ago

You could also just set staleTimes if you want to keep stuff cached But also, you mean you have 10+ useQuerys with the same key and query fn? Some code would help if you can.

ambitious-aquaOP•10mo ago

Yeah, below is an example where both queries is dependent on the locationId param and I have these queries spread out a page. It is a frequent user action where the user can change the location id. The useUpdateLocationId mutation is where the logic happens!

export const useQueryHook = () => {
  const locationId = useLocationId()

  return useQuery({
    queryKey: ['query1', locationId],
    queryFn: () => fetchQuery1(locationId),
    enabled: Boolean(locationId),
  })
}

export const useQueryHook2 = () => {
  const locationId = useLocationId()

  return useQuery({
    queryKey: ['query2', locationId],
    queryFn: () => fetchQuery2(locationId),
    enabled: Boolean(locationId),
  })
}


export const useUpdateLocationId = () => {
  const router = useRouter()
  const { mutateAsync } = useMutationUpdateLocationId()

  return async (id) => {
    // this mutation changes the value returned from useLocationId()
    // causing queries to fire off requests when I don't want them to
    // since they will be routed to a different route
    await mutateAsync(id)
    router.push('/next-route')
  }
}

export const useQueryHook = () => {
  const locationId = useLocationId()

  return useQuery({
    queryKey: ['query1', locationId],
    queryFn: () => fetchQuery1(locationId),
    enabled: Boolean(locationId),
  })
}

export const useQueryHook2 = () => {
  const locationId = useLocationId()

  return useQuery({
    queryKey: ['query2', locationId],
    queryFn: () => fetchQuery2(locationId),
    enabled: Boolean(locationId),
  })
}


export const useUpdateLocationId = () => {
  const router = useRouter()
  const { mutateAsync } = useMutationUpdateLocationId()

  return async (id) => {
    // this mutation changes the value returned from useLocationId()
    // causing queries to fire off requests when I don't want them to
    // since they will be routed to a different route
    await mutateAsync(id)
    router.push('/next-route')
  }
}

optimistic-gold•10mo ago

So /next-route doesn't have location_id as a query or path param correct? Your updating an id but navigating away from where it's been used

ambitious-aquaOP•10mo ago

right location_id comes from the database and /next-route doesn't use the location_id param at all and the previous mounted queries are also not used on that page but they are firing off those requests due to the sequence of actions from that mutation. the abort controller works to a certain extent but breaks down on slower networks where the requests still fire

optimistic-gold•10mo ago

What the metrics your getting from slow networks ? I suppose a higher level question I have, why is changing users causing this id to change? And what is the purpose of the location_id, what is a "location"?

ambitious-aquaOP•10mo ago

the above ID is just an example without explaining too much about what the purpose is assuming that it is needed and required. the networks being slow isn't the problem. this is just a general question on if there is some kinda API that allows this to work without disabling individual queries on the page based on certain logic.

optimistic-gold•10mo ago

No API that I know of. Sorry I can't be of more help.

Gaming

Programming

how to "pause" queries globally?

Did you find this page helpful?