Question on Paginated and Dependant Queries

[rick427]

Hi, so i was reading the docs, super amazing btw and i saw that creating a dependant query is done simply by including the value that the query depends on in the queryKey array like so;

const { data, status, isError } = useQuery({
    queryKey: ['/api/transfers', user],
    queryFn: () => getTransfers({businessId: user?.businessId}),
    retry: 3,
    enabled: !!user,
    refetchOnWindowFocus: true,
  });

However i also want this query to run again when the user changes the page number. From the docs (pagination) the process is similar to setting up dependant queries so this is what i did.

const { data, status, isError } = useQuery({
    queryKey: ['/api/transfers', user, pageNumber],
    queryFn: () => getTransfers({businessId: user?.businessId, pageNumber}),
    retry: 3,
    enabled: !!user,
    keepPreviousData: true,
    refetchOnWindowFocus: true,
  });

Is this the right way of doing this ? Can you have multiple values in the queryKey like so ?? Any help is appreciated. Thanks

[TkDodo]

Is this the right way of doing this?

Absolutely. All dependencies / things the queryFn needs should be part of the queryKey.

We also have an eslint plugin to enforce this: https://tanstack.com/query/v4/docs/eslint/exhaustive-deps