useQuery code generation template based on swagger-typescript-api and @tanstack/query
- Automatically generate the queryKey creator
- Automatically encapsulate api requests into useQuery and useMutation.
- Typescript type hint in setQueryData
| template | react-query | vue-query |
|---|---|---|
| default | ✅ | ✅ |
| modular | ✅ | ✅ |
default template
import { createApiQuery } from '../../__generated__/api-react-default/Queries'
import { Api } from '../../__generated__/api-react-default/api'
const api = new Api()
const apiQuery = createApiQuery(api)
const { data: _data } = apiQuery.pet.useFindPetsByStatus({
// ^? AxiosResponse<TypePet[], void>> | undefined
query: {
status: ['sold'],
// ^? ("available" | "pending" | "sold")[]
},
})
const petQueryUpdate = apiQuery.pet.useQueryUpdate()
petQueryUpdate(
apiQuery.pet.createFindPetsByStatusQueryKey({
query: {
status: ['sold'],
// ^? ("available" | "pending" | "sold")[]
},
}),
(oldValue) => {
// ^? AxiosResponse<TypePet[], void>
return oldValue
},
)
const mutation = apiQuery.store.usePlaceOrderMutation(
{
onSuccess(_data, { body: _body }) {
// ^? TypeOrder
// ^? AxiosResponse<TypeOrder>
},
},
)
mutation.mutateAsync({
body: {},
// ^? TypeOrder
})modular template
import { createPetApiQuery, createStoreApiQuery, usePetApiQueryUpdate } from '../../__generated__/api-react-modular/Queries'
import { Store } from '../../__generated__/api-react-modular/Store'
import { Pet } from '../../__generated__/api-react-modular/Pet'
const petApi = new Pet()
const petQuery = createPetApiQuery(petApi)
const { data: _data } = petQuery.useFindPetsByStatus({
// ^? AxiosResponse<TypePet[], void> | undefined
query: {
status: ['sold'],
// ^? ("available" | "pending" | "sold")[]
},
})
const petQueryUpdate = usePetApiQueryUpdate()
petQueryUpdate(
petQuery.createFindPetsByStatusQueryKey({
query: {
status: ['sold'],
// ^? ("available" | "pending" | "sold")[]
},
}),
(oldValue) => {
// ^? AxiosResponse<TypePet[], void>
return oldValue
},
)
const storeApi = new Store()
const storeQuery = createStoreApiQuery(storeApi)
const mutation = storeQuery.usePlaceOrderMutation(
{
onSuccess(_data, { body: _body }) {
// ^? TypeOrder
// ^? AxiosResponse<TypeOrder, void>
},
},
)
mutation.mutateAsync({
body: {},
// ^? TypeOrder
})pnpm i swagger-typescript-api -DDownload the template to your project
# default template
npx dgit --ref main croatialu/query-templates/templates/default ./templates
# or modular template
npx dgit --ref main croatialu/query-templates/templates/modular ./templates// scripts/gen-api/index.mjs
import { resolve } from 'node:path'
import process from 'node:process'
import { generateApi } from 'swagger-typescript-api'
generateApi({
input: resolve(process.cwd(), 'swagger.json'),
output: resolve(process.cwd(), '__generated__/api'),
name: 'api',
modular: true,
typePrefix: 'Type',
templates: resolve(process.cwd(), 'templates/modular'),
extraTemplates: [
{
name: 'Queries',
path: resolve(process.cwd(), 'templates/modular/vue-query.ejs'),
},
],
})node ./scripts/gen-api/index.mjspnpm install
pnpm start
