deps(react query): update to react query 5 (#26)

examples/react-app/package.json

@@ -6,14 +6,14 @@
   "scripts": {
     "dev": "run-p dev:mock dev:client",
     "dev:client": "vite --clearScreen=false",
-    "dev:mock": "prism mock ./petstore.yaml",
+    "dev:mock": "prism mock ./petstore.yaml --dynamic",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "generate:api": "node ../../dist/src/cli.js -i ./petstore.yaml -c axios --exportSchemas=true --postfixServices=Client --request ./request.ts",
     "test:generated": "tsc ./openapi/queries/index.ts --noEmit --target esnext --moduleResolution node"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.29.7",
+    "@tanstack/react-query": "^5.0.0",
     "axios": "^1.4.0",
     "form-data": "~4.0.0",
     "react": "^18.2.0",

examples/react-app/src/App.tsx

@@ -2,20 +2,28 @@ import "./App.css";
 import {
   useDefaultClientAddPet,
   useDefaultClientFindPets,
+  useDefaultClientFindPetsKey,
 } from "../openapi/queries";
+import { useState } from 'react';
+import { queryClient } from './queryClient';
 
 function App() {
-  const { data } = useDefaultClientFindPets(
-    { tags: [], limit: 10 },
-    [],
-    {
-      onError: (error) => {
-        console.error(error);
-      },
-    }
+
+  const [tags, _setTags] = useState<string[]>([]);
+  const [limit, _setLimit] = useState<number>(10);
+
+  const { data, error, refetch } = useDefaultClientFindPets(
+    { tags, limit },
   );
 
-  const mutation = useDefaultClientAddPet();
+  const { mutate: addPet } = useDefaultClientAddPet();
+
+  if (error) return (
+  <div>
+    <p>Failed to fetch pets</p>
+    <button onClick={() => refetch()}>Retry</button>
+  </div>
+  );
 
   return (
     <div className="App">
@@ -27,12 +35,18 @@ function App() {
       </ul>
       <button
         onClick={() => {
-          mutation.mutate(
+          addPet(
             {
               requestBody: { name: "Duggy" },
             },
             {
-              onSuccess: () => console.log("success"),
+              onSuccess: () => {
+                queryClient.invalidateQueries({
+                  queryKey: [useDefaultClientFindPetsKey],
+                });
+                console.log("success")
+
+              },
               onError: (error) => console.error(error),
             }
           );

examples/react-app/src/main.tsx

@@ -2,9 +2,8 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
-import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
-const queryClient = new QueryClient()
-
+import { QueryClientProvider } from '@tanstack/react-query'
+import { queryClient } from './queryClient'
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>

examples/react-app/src/queryClient.tsx

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient();

package.json

@@ -33,13 +33,13 @@
   "license": "MIT",
   "devDependencies": {
     "@types/node": "^18.16.0",
-    "commander": "^10.0.1",
+    "commander": "^11.1.0",
     "glob": "^10.2.5",
     "openapi-typescript-codegen": "^0.24.0",
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "commander": ">= 10 < 11",
+    "commander": ">= 11 < 12",
     "glob": ">= 10",
     "openapi-typescript-codegen": "^0.24.0",
     "typescript": ">= 4.8.3"