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

Author: seriouslag

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"