Skip to content

[react-query] When generating both normal query and infinite query, use different query key for infinite query #2359

@kennyhei

Description

@kennyhei

Currently if you do this in the config:

operations: {
  search: {
    useQuery: true,
    useInfinite: true,
  }
}

It correctly generates two query hooks for search endpoint:

  • useSearch
  • useSearchInfinite

However, both use the same function for assigning queryKey value: getSearchQueryKey and thus both by default are using same queryKey.

This can lead to issues if both hooks are used in different pages. Here's an example case, see TkDodo's comment: TanStack/query#7633

My suggestion is that orval would automatically generate getSearchInfiniteQueryKey for infinite query which is the same as getSearchQueryKey but with "infinite" as part of the query key. Or it could be even something like this:

export const getSearchQueryKey = (
    params?: SearchParams,
    isInfiniteQuery?: boolean,
) => {
    return [`/search`, ...(isInfiniteQuery ? ["infinite"] : []), ...(params ? [params] : [])] as const;
};

Metadata

Metadata

Assignees

Labels

tanstack-queryTanStack Query related issue

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions