Skip to content

feat(openapi-react-query): add queryKeyFn option to createClient#2777

Open
codr wants to merge 2 commits intoopenapi-ts:mainfrom
codr:feat/query-key-fn
Open

feat(openapi-react-query): add queryKeyFn option to createClient#2777
codr wants to merge 2 commits intoopenapi-ts:mainfrom
codr:feat/query-key-fn

Conversation

@codr
Copy link
Copy Markdown

@codr codr commented Apr 17, 2026

Problem

When an app uses two openapi-fetch clients targeting different servers (e.g. an app API at :8000 and a PDM API at :8100), any endpoint path shared between them produces identical TanStack Query keys [method, path, init]. TanStack Query fires only one request and both hooks receive the same cached data — even though they point at different servers.

Fix

Add an optional queryKeyFn to createClient. When provided, it replaces the default [method, path, init] key, giving callers a way to namespace keys per client instance:

const pdmClient = createClient(fetchClient, {
  queryKeyFn: (method, path, init) => ["pdm", method, path, init],
});

This is purely additive — default behaviour is unchanged.

Implementation note

The existing shared queryFn destructured [method, path, init] from the TanStack-provided queryKey context. Allowing custom key shapes would have silently broken that destructuring. This PR refactors queryFn into a per-call closure that captures method, path, and init from the outer queryOptions call instead. The same fix is applied to the useInfiniteQuery inline queryFn.

Changes

  • src/index.ts — exports QueryKeyFn and CreateClientOptions types; threads queryKeyFn through createClient; inlines the queryFn as a closure
  • test/index.test.tsx — new describe("queryKeyFn") block: default key shape, custom key shape, and no-dedup-across-clients
  • README.md — new Options section documenting queryKeyFn with two-client example
  • .changeset/query-key-fn.md — minor bump changeset

Breaking changes

None — purely additive; passing no clientOptions gives identical behaviour to before.

Allows callers to namespace TanStack Query keys per client instance,
preventing unintended deduplication when two clients share endpoint
paths but target different base URLs.

Also refactors the shared queryFn into a per-call closure so it no
longer destructures from the queryKey — a prerequisite for supporting
custom key shapes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@codr codr requested a review from a team as a code owner April 17, 2026 18:01
@codr codr requested a review from duncanbeevers April 17, 2026 18:01
@netlify
Copy link
Copy Markdown

netlify bot commented Apr 17, 2026

👷 Deploy request for openapi-ts pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit caad8ea

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 17, 2026

🦋 Changeset detected

Latest commit: caad8ea

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
openapi-react-query Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant