Merge branch 'main' into nopitown-fix-prefetch-query-keys

.github/workflows/test.yml

@@ -45,6 +45,10 @@ jobs:
       - name: Run tsc
         run: pnpm --filter @7nohe/react-app test:generated
 
+      - name: Run biome
+        run: pnpm biome check .
+        if: ${{ matrix.os == 'ubuntu-latest' }}
+
       - name: Run test
         run: pnpm test
 

README.md

@@ -201,12 +201,17 @@ import {
 
 // App.tsx
 function App() {
-  const { data } = usePetServiceFindPetsByStatus({ status: ["available"] });
+  const [status, setStatus] = React.useState(["available"]);
+  const { data } = usePetServiceFindPetsByStatus({ status });
   const { mutate } = usePetServiceAddPet({
     onSuccess: () => {
       queryClient.invalidateQueries({
-        // Call the query key function to get the query key, this is important to ensure the query key is created the same way as the query hook, this insures the cache is invalidated correctly and is typed correctly
-        queryKey: [UsePetServiceFindPetsByStatusKeyFn()],
+        // Call the query key function to get the query key
+        // This is important to ensure the query key is created the same way as the query hook
+        // This insures the cache is invalidated correctly and is typed correctly
+        queryKey: [UsePetServiceFindPetsByStatusKeyFn({
+          status
+        })],
       });
     },
   });
@@ -257,6 +262,39 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 
 ```
 
+## Development
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Run tests
+```bash
+pnpm test
+```
+
+### Run linter
+```bash
+pnpm lint
+```
+
+### Run linter and fix
+```bash
+pnpm lint:fix
+```
+
+### Update snapshots
+```bash
+pnpm snapshot
+```
+
+### Build example and validate generated code
+```bash
+npm run build && pnpm --filter @7nohe/react-app generate:api && pnpm --filter @7nohe/react-app test:generated 
+```
+
 ## License
 
 MIT

biome.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.2/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": [
+      "dist",
+      "examples/react-app/openapi",
+      "coverage",
+      "examples/nextjs-app/openapi",
+      "examples/nextjs-app/.next"
+    ]
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  }
+}

examples/nextjs-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs-app/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

examples/nextjs-app/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Providers from "./providers";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <Providers>
+        <body className={inter.className}>{children}</body>
+      </Providers>
+    </html>
+  );
+}

examples/nextjs-app/app/page.tsx

@@ -0,0 +1,24 @@
+import { prefetchUseDefaultServiceFindPets } from "@/openapi/queries/prefetch";
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
+import Pets from "./pets";
+
+export default async function Home() {
+  const queryClient = new QueryClient();
+
+  await prefetchUseDefaultServiceFindPets(queryClient, {
+    limit: 10,
+    tags: [],
+  });
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <Pets />
+      </HydrationBoundary>
+    </main>
+  );
+}

examples/nextjs-app/app/pets.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useDefaultServiceFindPets } from "@/openapi/queries";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+export default function Pets() {
+  const { data } = useDefaultServiceFindPets({
+    limit: 10,
+    tags: [],
+  });
+
+  return (
+    <>
+      <h1>Pet List</h1>
+      <ul>
+        {Array.isArray(data) &&
+          data?.map((pet, index) => (
+            <li key={`${pet.id}-${index}`}>{pet.name}</li>
+          ))}
+      </ul>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </>
+  );
+}

examples/nextjs-app/app/providers.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+// We can not useState or useRef in a server component, which is why we are
+// extracting this part out into it's own file with 'use client' on top
+import { useState } from "react";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+  if (typeof window === "undefined") {
+    // Server: always make a new query client
+    return makeQueryClient();
+  }
+  // Browser: make a new query client if we don't already have one
+  // This is very important so we don't re-make a new client if React
+  // suspends during the initial render. This may not be needed if we
+  // have a suspense boundary BELOW the creation of the query client
+  if (!browserQueryClient) browserQueryClient = makeQueryClient();
+  return browserQueryClient;
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

examples/nextjs-app/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/nextjs-app/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "nextjs-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "run-p dev:mock dev:next",
+    "dev:next": "next dev",
+    "dev:mock": "prism mock ../petstore.yaml --dynamic",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml -c axios --request ./request.ts --format=biome --lint=biome"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.32.1",
+    "@tanstack/react-query-devtools": "^5.32.1",
+    "axios": "^1.6.7",
+    "next": "^14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@stoplight/prism-cli": "^5.5.2",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

examples/nextjs-app/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;