fix(react-query): add query params to query key

Author: cjquines

packages/client/src/codegen/generated-api-client.test.ts

@@ -122,7 +122,7 @@ describe("Generated API Client", () => {
     it("can pass query params", async () => {
       const { queryFn, queryKey } = client.cats.useList({ color: "black" });
 
-      expect(queryKey).toEqual(["/api/cats"]);
+      expect(queryKey).toEqual(["/api/cats?color=black"]);
       expect(queryFn).toBeTypeOf("function");
 
       const cats = await queryFn();

packages/client/src/core/api-client.test.ts

@@ -174,7 +174,7 @@ describe("API Client", () => {
     it("can pass query params", async () => {
       const { queryFn, queryKey } = client.cats.useList({ color: "black" });
 
-      expect(queryKey).toEqual(["/api/cats"]);
+      expect(queryKey).toEqual(["/api/cats?color=black"]);
       expect(queryFn).toBeTypeOf("function");
 
       const cats = await queryFn();

packages/client/src/core/api-client.ts

@@ -173,19 +173,23 @@ function createClientProxy(
 
       if (config.extensions) {
         const [action, extensionMethod] = callPath.slice(-2);
+        const method = inferHTTPMethod(action);
         const path = callPath.slice(0, -2);
         const bodyOrQuery = isQueryOrBody(pendingArgs[0])
           ? pendingArgs[0]
           : undefined;
+        const query = method === "GET" ? bodyOrQuery : undefined;
         const queryFn = (callTimeBody?: any) => {
-          const method = inferHTTPMethod(action);
           const body = method === "GET" ? undefined : callTimeBody;
-          const query = method === "GET" ? bodyOrQuery : undefined;
 
           return makeRequest(config, action, path, body, query);
         };
         const queryKey = [
-          makeUrl(path, { outputCase: config.urlCase, method: "GET" }),
+          makeUrl(path, {
+            outputCase: config.urlCase,
+            method: "GET",
+            query,
+          }),
         ];
         const handler = getExtensionHandler(
           config.extensions,
@@ -201,13 +205,18 @@ function createClientProxy(
 
       if (isCallingHook(lastCall)) {
         const action = callPath.slice(-1)[0];
+        const method = inferHTTPMethod(action);
         const path = callPath.slice(0, -1);
         const body = argumentsList[0];
 
         return {
           queryFn: () => makeRequest(config, action, path, body),
           queryKey: [
-            makeUrl(path, { outputCase: config.urlCase, method: "GET" }),
+            makeUrl(path, {
+              outputCase: config.urlCase,
+              method: "GET",
+              query: method === "GET" ? body : undefined,
+            }),
           ],
         };
       }

packages/client/src/extensions/extensions.generated.test.ts

@@ -61,7 +61,7 @@ describe("react-query extension runtime", () => {
       client.cats.list({ color: "black" }).useQuery();
       expect(mockUseQuery).toBeCalledWith({
         queryFn: expect.any(Function),
-        queryKey: ["/api/cats"],
+        queryKey: ["/api/cats?color=black"],
       });
       expect(mockFetch).toBeCalledWith("/api/cats?color=black", {
         method: "GET",