From c6d4b89bc7452ed8a721e2ce7ab99cbee34c2ceb Mon Sep 17 00:00:00 2001 From: Morley Tatro Date: Sat, 10 Aug 2024 14:49:41 -0700 Subject: [PATCH 1/3] fix docs typos --- packages/openapi-react-query/README.md | 28 +++++++++++++------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/openapi-react-query/README.md b/packages/openapi-react-query/README.md index 3d9288158..56abf53a2 100644 --- a/packages/openapi-react-query/README.md +++ b/packages/openapi-react-query/README.md @@ -8,7 +8,7 @@ It works by using [openapi-fetch](../openapi-fetch) and [openapi-typescript](../ - ✅ All parameters, request bodies, and responses are type-checked and 100% match your schema - ✅ No manual typing of your API - ✅ Eliminates `any` types that hide bugs -- ✅ Also eliminates `as` type overrides that can also hide bugs +- ✅ Eliminates `as` type overrides that can also hide bugs ## Setup @@ -25,42 +25,42 @@ Next, generate TypeScript types from your OpenAPI schema using openapi-typescrip npx openapi-typescript ./path/to/api/v1.yaml -o ./src/lib/api/v1.d.ts ``` -> ⚠️ Be sure to validate your schemas! openapi-typescript will err on invalid schemas. +> ⚠️ Be sure to validate your schemas! openapi-typescript will error on invalid schemas. ## Usage -Once your types has been generated from your schema, you can create a [fetch client](../openapi-fetch), a react-query client and start querying your API. +Once your types have been generated from your schema, you can create a [fetch client](../openapi-fetch), a react-query client and start querying your API. ```tsx -import createFetchClient from "openapi-fetch"; -import createClient from "openapi-react-query"; -import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript +import createFetchClient from 'openapi-fetch'; +import createClient from 'openapi-react-query'; +import type { paths } from './my-openapi-3-schema'; // generated by openapi-typescript const fetchClient = createFetchClient({ - baseUrl: "https://myapi.dev/v1/", + baseUrl: 'https://myapi.dev/v1/', }); const $api = createClient(fetchClient); const MyComponent = () => { - const { data, error, isLoading } = $api.useQuery( - "get", - "/blogposts/{post_id}", + const { data, error, isPending } = $api.useQuery( + 'get', + '/blogposts/{post_id}', { params: { path: { post_id: 5 }, }, - }, + } ); - if (isLoading || !data) return "Loading..."; + if (isPending || !data) return 'Loading...'; - if (error) return `An error occured: ${error.message}`; + if (error) return `An error occurred: ${error.message}`; return
{data.title}
; }; ``` -> You can find more information about `createFetchClient` on the [openapi-fetch documentation](../openapi-fetch). +> You can find more information about `createFetchClient` in the [openapi-fetch documentation](../openapi-fetch). ## 📓 Docs From 6009c2b690ff7e49e738d1d5b8db3ee3d27d8001 Mon Sep 17 00:00:00 2001 From: Morley Tatro Date: Sun, 11 Aug 2024 08:25:10 -0700 Subject: [PATCH 2/3] revert quotes switch --- packages/openapi-react-query/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/openapi-react-query/README.md b/packages/openapi-react-query/README.md index 56abf53a2..b81ee3a86 100644 --- a/packages/openapi-react-query/README.md +++ b/packages/openapi-react-query/README.md @@ -32,19 +32,19 @@ npx openapi-typescript ./path/to/api/v1.yaml -o ./src/lib/api/v1.d.ts Once your types have been generated from your schema, you can create a [fetch client](../openapi-fetch), a react-query client and start querying your API. ```tsx -import createFetchClient from 'openapi-fetch'; -import createClient from 'openapi-react-query'; -import type { paths } from './my-openapi-3-schema'; // generated by openapi-typescript +import createFetchClient from "openapi-fetch"; +import createClient from "openapi-react-query"; +import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript const fetchClient = createFetchClient({ - baseUrl: 'https://myapi.dev/v1/', + baseUrl: "https://myapi.dev/v1/", }); const $api = createClient(fetchClient); const MyComponent = () => { const { data, error, isPending } = $api.useQuery( - 'get', - '/blogposts/{post_id}', + "get", + "/blogposts/{post_id}", { params: { path: { post_id: 5 }, @@ -52,7 +52,7 @@ const MyComponent = () => { } ); - if (isPending || !data) return 'Loading...'; + if (isPending || !data) return "Loading..."; if (error) return `An error occurred: ${error.message}`; From b85d010f0fc371e123e1ebf6d66d0bc42405ac66 Mon Sep 17 00:00:00 2001 From: Morley Tatro Date: Sun, 11 Aug 2024 22:41:16 -0700 Subject: [PATCH 3/3] remove lint line --- packages/openapi-react-query/README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/openapi-react-query/README.md b/packages/openapi-react-query/README.md index b81ee3a86..50a521c4b 100644 --- a/packages/openapi-react-query/README.md +++ b/packages/openapi-react-query/README.md @@ -25,8 +25,6 @@ Next, generate TypeScript types from your OpenAPI schema using openapi-typescrip npx openapi-typescript ./path/to/api/v1.yaml -o ./src/lib/api/v1.d.ts ``` -> ⚠️ Be sure to validate your schemas! openapi-typescript will error on invalid schemas. - ## Usage Once your types have been generated from your schema, you can create a [fetch client](../openapi-fetch), a react-query client and start querying your API.