@croatialu/query-templates
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

query-templates

useQuery code generation template based on swagger-typescript-api and @tanstack/query

Features

  • 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

Open in StackBlitz

Usage

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
})

Install

pnpm i swagger-typescript-api -D

Copy template

Download 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

Create script file (modular)

// 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'),
    },
  ],
})

Generate ts file

node ./scripts/gen-api/index.mjs

Setup

pnpm install

pnpm start

Thanks

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.0.10latest

Version History

VersionDownloads (Last 7 Days)Published
0.0.10

Package Sidebar

Install

npm i @croatialu/query-templates

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

47 kB

Total Files

7

Last publish

Collaborators

  • wuli.croatia