T
TanStack•2y ago
correct-apricot

Dynamically modifying queryKeys?

A little context, what I'm doing is writing "controllers" that do some data manipulation and return them as queryOption objects. This way I can make the call on the server and hydrate the client side queryClient. (NextJS pages directory.) I have to call one API to get an array of address books, then run through those address books and get all the addresses in them. And return them categorized into sepearte billing and shipping addresses. /addressbooks -> /addressbooks/{addressBookId}/addresses -> groupBy(addressType) What I would like to do is dynamically push to a queryKey array and make sure that's used so I can easily invalidate edits on individual addresses. 
export function example() {
  const queryKeys = [...addressBookKeys]

  return queryOptions({
    queryFn() {
      // fetching logic
      // as we loop through addressbooks and create addresses promises, modify queryKey array
      // each promise is dependent on the return of the address book ids
      queryKeys.push(...addressKeys)
    },
    queryKey: queryKeys,
  })
}
export function example() {
  const queryKeys = [...addressBookKeys]

  return queryOptions({
    queryFn() {
      // fetching logic
      // as we loop through addressbooks and create addresses promises, modify queryKey array
      // each promise is dependent on the return of the address book ids
      queryKeys.push(...addressKeys)
    },
    queryKey: queryKeys,
  })
}
Is there precedent for this? Are queryKeys only set on the initial call, is there another way to do this?
1 Reply
correct-apricot
correct-apricotOP•2y ago
I'm changing my mind on this, I think I was trying to get too fancy with keys. I can grab the name of the function and just use that, depend on prop changes for updates.

Did you find this page helpful?