Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for new version of @heyapi and use fetch client ins… #125

Closed
wants to merge 13 commits into from
Closed

feat: add support for new version of @heyapi and use fetch client ins… #125

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8fd8a16
feat: add support for new version of @heyapi and use fetch client ins…
omridevk Jun 12, 2024
4d4e8d7
chore: remove comment
omridevk Jun 12, 2024
961428d
chore: remove comment
omridevk Jun 13, 2024
d34e761
fix: make sure to remove not relevant props from params
omridevk Jun 13, 2024
a341432
fix: get data from the client
omridevk Jun 13, 2024
0a1ff9d
fix: get data from the client
omridevk Jun 13, 2024
f716732
chore: release v1.4.2-beta.1
omridevk Jun 13, 2024
9eedb82
fix: add formatters and linters on the queries output as well
omridevk Jun 13, 2024
55ab44d
chore: release v1.4.2-beta.2
omridevk Jun 13, 2024
f8df50f
chore: release v1.4.2-beta.3
omridevk Jun 13, 2024
873c5f2
chore: release v1.4.2-beta.4
omridevk Jun 13, 2024
cb263a0
chore: release v1.4.2-beta.5
omridevk Jun 14, 2024
012f10f
chore: release v2.0.0
omridevk Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/petstore.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,12 +151,12 @@ components:
NewPet:
type: object
required:
- name
- name
properties:
name:
type: string
tag:
type: string
type: string

Error:
type: object
Expand All @@ -168,4 +168,4 @@ components:
type: integer
format: int32
message:
type: string
type: string
3 changes: 2 additions & 1 deletion examples/react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@
"dev:mock": "prism mock ../petstore.yaml --dynamic",
"build": "tsc && vite build",
"preview": "vite preview",
"generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml -c axios --request ./request.ts --format=biome --lint=biome",
"generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml -c @hey-api/client-fetch --format=biome --lint=biome",
"test:generated": "tsc -p ./tsconfig.openapi.json --noEmit"
},
"dependencies": {
"@hey-api/client-fetch": "^0.1.3",
"@tanstack/react-query": "^5.32.1",
"axios": "^1.6.7",
"form-data": "~4.0.0",
Expand Down
91 changes: 0 additions & 91 deletions examples/react-app/request.ts
View file
Open in desktop

This file was deleted.

29 changes: 16 additions & 13 deletions examples/react-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
import "./App.css";
import { useState } from "react";

import { createClient } from "@hey-api/client-fetch";
import {
UseDefaultServiceFindPetsKeyFn,
useDefaultServiceAddPet,
useDefaultServiceFindPets,
useDefaultServiceGetNotDefined,
useDefaultServicePostNotDefined,
UseFindPetsKeyFn,
useAddPet,
useFindPets,
useGetNotDefined,
usePostNotDefined,
} from "../openapi/queries";
import { SuspenseParent } from "./components/SuspenseParent";
import { queryClient } from "./queryClient";

function App() {
createClient({ baseUrl: "http://localhost:4010" });

const [tags, _setTags] = useState<string[]>([]);
const [limit, _setLimit] = useState<number>(10);

const { data, error, refetch } = useDefaultServiceFindPets({ tags, limit });
const { data, error, refetch } = useFindPets({ query: { tags, limit } });
// This is an example of using a hook that has all parameters optional;
// Here we do not have to pass in an object
const { data: _ } = useDefaultServiceFindPets();
const { data: _ } = useFindPets();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dropping the use of tag names makes this a breaking change.

I must consider whether dropping the tag to generate the hook is helpful.
I see a benefit in having the tag help describe the hook, especially for large spec files.
I also see the beauty in not having the tag there.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you referring the "defaultService"? because wasn't sure what to put there if there's no real concept of a service in the new client.

Copy link
Collaborator

@seriouslag seriouslag Jun 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was referring to defaultService. For large spec files it’s a nice to have buckets to put similar api calls. dogService, catService, etc. makes DX better as you can discover api calls related to what you are working with using intelliSense/autocomplete

How are the names of the hooks being generated now? I believe they are generated from the method names of the generated client code from @hey-api. Does @hey-api use operationId or is it generated from the displayName, or something else? How are duplicate names handled.

I can imagine 2 generated hooks having the same or similar name using the clients code now that tags are not used in the names.

That was my stream of consciousness. I haven’t dug into the code yet.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@seriouslag it is using the operationId and AFAIK it should be unique in the spec no?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe OperationId to be unique but not a required field in the OpenAPI spec.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I checked and it is either using the operationId, or build it using the URL, so we can definitely have a conflicts no?


// This is an example of a query that is not defined in the OpenAPI spec
// this defaults to any - here we are showing how to override the type
// Note - this is marked as deprecated in the OpenAPI spec and being passed to the client
const { data: notDefined } = useDefaultServiceGetNotDefined<undefined>();
const { mutate: mutateNotDefined } =
useDefaultServicePostNotDefined<undefined>();
const { data: notDefined } = useGetNotDefined<undefined>();
const { mutate: mutateNotDefined } = usePostNotDefined<undefined>();

const { mutate: addPet } = useDefaultServiceAddPet();
const { mutate: addPet } = useAddPet();

if (error)
return (
Expand All @@ -52,12 +55,12 @@ function App() {
onClick={() => {
addPet(
{
requestBody: { name: "Duggy" },
body: { name: "Duggy" },
},
{
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: UseDefaultServiceFindPetsKeyFn(),
queryKey: UseFindPetsKeyFn({ query: { tags, limit } }),
});
console.log("success");
},
Expand Down
10 changes: 6 additions & 4 deletions examples/react-app/src/components/SuspenseChild.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { useDefaultServiceFindPetsSuspense } from "../../openapi/queries/suspense";
import { useFindPetsSuspense } from "../../openapi/queries/suspense";

export const SuspenseChild = () => {
const { data } = useDefaultServiceFindPetsSuspense({ tags: [], limit: 10 });

const { data, error } = useFindPetsSuspense({
query: { tags: [], limit: 10 },
});
console.log({ error });
if (!Array.isArray(data)) {
return <div>Error!</div>;
}

return (
<ul>
{data?.map((pet, index) => (
{data?.map((pet) => (
<li key={pet.id}>{pet.name}</li>
))}
</ul>
Expand Down
18 changes: 14 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"name": "@7nohe/openapi-react-query-codegen",
"version": "1.4.1",
"name": "openapi-react-query-codegen",
"version": "1.4.2-beta.4",
"description": "OpenAPI React Query Codegen",
"bin": {
"openapi-rq": "dist/cli.mjs"
},
"private": false,
"type": "module",
"workspaces": ["examples/*"],
"scripts": {
Expand All @@ -13,10 +14,17 @@
"lint:fix": "biome check --apply .",
"preview": "npm run build && npm -C examples/react-app run generate:api",
"prepublishOnly": "npm run build",
"release": "npx git-ensure -a && npx bumpp --commit --tag --push",
"release": "npx bumpp --commit --tag --push",
"test": "vitest --coverage.enabled true",
"snapshot": "vitest --update"
},
"exports": [
{
"import": "./dist/generate.mjs",
"require": "./dist/generate.mjs",
"types": "./dist/generate.d.mts"
}
],
"repository": {
"type": "git",
"url": "git+https://github.com/7nohe/openapi-react-query-codegen.git"
Expand All @@ -37,7 +45,9 @@
"author": "Daiki Urata (@7nohe)",
"license": "MIT",
"dependencies": {
"@hey-api/openapi-ts": "0.45.1"
"@hey-api/openapi-ts": "0.46.3",
"@types/cross-spawn": "^6.0.6",
"cross-spawn": "^7.0.3"
},
"devDependencies": {
"@biomejs/biome": "^1.7.2",
Expand Down
Loading
Loading