Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/acrool/acrool-graphql-codegen

graphql code generator
https://github.com/acrool/acrool-graphql-codegen

graphql graphql-codegen react-query

Last synced: 5 days ago
JSON representation

graphql code generator

Host: GitHub
URL: https://github.com/acrool/acrool-graphql-codegen
Owner: acrool
Created: 2023-04-07T02:47:38.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-07-16T04:25:58.000Z (4 months ago)
Last Synced: 2024-07-16T07:06:17.749Z (4 months ago)
Topics: graphql, graphql-codegen, react-query
Language: TypeScript
Homepage:
Size: 318 KB
Stars: 6
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

awesome-react - Acrool Graphql Plugins: React-Query - Graphql React-Query (API Utils)
awesome-react - Acrool Graphql Plugins: React-Query - Graphql React-Query (API Utils)

README

# Acrool Graphql Codegen Plugins - react-query

This is a graphql code generator plugins use react hooks

[![NPM](https://img.shields.io/npm/v/@acrool/graphql-codegen-react-query.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/graphql-codegen-react-query)
[![npm](https://img.shields.io/bundlejs/size/@acrool/graphql-codegen-react-query?style=for-the-badge)](https://github.com/acrool/@acrool/graphql-codegen-react-query/blob/main/LICENSE)
[![npm](https://img.shields.io/npm/l/@acrool/graphql-codegen-react-query?style=for-the-badge)](https://github.com/acrool/react-picker/blob/main/LICENSE)

[![npm downloads](https://img.shields.io/npm/dm/@acrool/graphql-codegen-react-query.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/graphql-codegen-react-query)
[![npm](https://img.shields.io/npm/dt/@acrool/graphql-codegen-react-query.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/graphql-codegen-react-query)

## Features

- Graphql code generator plugins
- Quickly output grpahql .gql to react-query hooks
- Directly customize using `react-query` methods, such as: `useQuery`, `useMutation`, `useInfiniteQuery`
- Use `createQueryAndQueryClientHook` to generate `useQuery`, functions related to `useQueryClient`, such as `getQueryKey`, `fetchQuery`, `reFetchQuery`, `setQueryData`, `invalidateQueries`

## Install

```bash
yarn add -D @acrool/graphql-codegen-react-query
```

## Usage

add package.json script

```json
{
"scripts":{
"generate": "graphql-codegen --config ./codegen.ts"
}
}
```

./codegen.ts

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
schema: [
'./schema.graphql',
'scalar Upload'
],
documents: [
'./src/store/fragment.gql',
'./src/store/{main,custom}/**/{doc,subscription}.gql',
],
config: {
maybeValue: "T | undefined",
inputMaybeValue: "T | null",
},
generates: {
'./src/library/graphql/__generated__.ts': {
plugins: [
// https://the-guild.dev/graphql/codegen/plugins/typescript/typescript
'typescript',
// https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-operations
'typescript-operations',
'@acrool/graphql-codegen-react-query',
{
add: {
content: `
import {ReadStream} from 'fs-capacitor';
import {EDataLevel} from '@acrool/react-gantt';

interface GraphQLFileUpload {
filename: string;
mimetype: string;
encoding: string;
createReadStream(options?:{encoding?: string, highWaterMark?: number}): ReadStream;
}`
}
},
],
config: {
typesPrefix: 'I',
enumPrefix: false,
declarationKind: 'interface',
withMutationFn: true,
strictScalars: false,
skipTypename: true,
inputValue: true,
// avoidOptionals: true,
// ignoreEnumValuesFromSchema: false,
scalars: {
Upload: 'Promise',
ID: 'string',
IP: 'string',
UUID: 'string',
Role: 'Role',
Time: 'string',
FileData: 'string',
PeriodUnit: 'string',
Duration: 'number',
Locale: 'string',
TransactionID: 'string',
// OrderBy: `'desc'|'asc'`,
OrderBy: 'string',
Timestamp: 'string',
},
omitOperationSuffix: true,
exposeDocument: false,
exposeQuerySetData: true,
exposeQueryClientHook: true,
exposeFetcher: true,
fetcher: {
queryFunc: './createQueryHookFactory#createQueryHook',
queryAndQueryClientFunc: './createQueryHookFactory#createQueryAndQueryClientHook',
infiniteQueryFunc: './createQueryHookFactory#createInfiniteQueryHook',
mutationFunc: './createQueryHookFactory#createMutationHook',
isQueryAndQueryClient: true,
}
}
},
},
}

export default config
```

copy ./src/example in your project lib path

add your gql file

run script

```bash
yarn generate
```

## Release

```bash
yarn build && npm publish ./src/react-query --access=public
```

- [@acrool/graphql-codegen-react-query](https://github.com/acrool/acrool-graphql-codegen/tree/main/src/react-query)
- [Example](./src/example)

## License