feat(openapi-react-query): use queryOptions helper
#1950
Conversation
|
|
Probably a better idea, seeing that complexity is growing with SkipToken (even though I'm not too sure of the implications). |
|
@zsugabubus welp it looks like we're out of luck. Either we ask for the symbol to be exported, or we have to rely on the overloads... unless you have a better idea, I'm not sure of alternatives here. |
|
The below code works fine for me. I guess we don't need to actually assign anything, diff against my PR packages/openapi-react-query/src/index.ts | 6 ++++--
packages/openapi-react-query/test/index.test.tsx | 11 +++++++++++
2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/packages/openapi-react-query/src/index.ts b/packages/openapi-react-query/src/index.ts
index 97d83a6..01f848b 100644
--- a/packages/openapi-react-query/src/index.ts
+++ b/packages/openapi-react-query/src/index.ts
@@ -10,2 +10,3 @@ import {
type SkipToken,
+ type DataTag,
useMutation,
@@ -43,3 +44,3 @@ export type QueryOptionsFunction<Paths extends Record<string, Record<HttpMethod,
UseQueryOptions<Response["data"], Response["error"], Response["data"], QueryKey<Paths, Method, Path>>,
- "queryFn"
+ "queryFn" | "queryKey"
> & {
@@ -49,2 +50,3 @@ export type QueryOptionsFunction<Paths extends Record<string, Record<HttpMethod,
>;
+ queryKey: DataTag<QueryKey<Paths, Method, Path>, Response["data"]>;
}
@@ -124,3 +126,3 @@ export default function createClient<Paths extends {}, Media extends MediaType =
const queryOptions: QueryOptionsFunction<Paths, Media> = (method, path, ...[init, options]) => ({
- queryKey: [method, path, init as InitWithUnknowns<typeof init>] as const,
+ queryKey: [method, path, init as InitWithUnknowns<typeof init>] as const as any,
queryFn,
diff --git a/packages/openapi-react-query/test/index.test.tsx b/packages/openapi-react-query/test/index.test.tsx
index 97550d4..06ebfa7 100644
--- a/packages/openapi-react-query/test/index.test.tsx
+++ b/packages/openapi-react-query/test/index.test.tsx
@@ -233,2 +233,13 @@ describe("client", () => {
});
+
+ it("returns queryKey that allows data to be inferred", async () => {
+ const fetchClient = createFetchClient<paths>();
+ const client = createClient(fetchClient);
+
+ const { queryKey } = client.queryOptions("get", "/string-array");
+
+ const data = queryClient.getQueryData(queryKey);
+
+ expectTypeOf(data).toEqualTypeOf<string[] | undefined>();
+ });
}); |
|
I think it is a good idea to rely on tanstack-query helper types as much as possible. When I originally wrote this library I went straight to the point but now when using more complex features the types are not correct (queryOptions, callbacks, etc). |
Changes
The current state of queryOptions doesn't take advantage of the
queryOptionshelper, which has the ability of linking the returned data shape to the queryKey.This is useful when using
queryClient.getQueryDataand especially handy for optimistic updates managed viaqueryClient.setQueryData.The proposed implementation only consumes the helper to build the queryOptions property, and doesn't touch the way options are passed to
useQuery/useSuspenseQueryto avoid narrowing the allowed options to the ones provided by the helper.How to Review
When consuming
queryClient.getQueryDataby providing a queryKey coming from a queryOptions object, see that the returned type isn'tunknownanymore, butResponse['data'] | undefined.Checklist
docs/updated (if necessary)pnpm run update:examplesrun (only applicable for openapi-typescript)