https://github.com/newbeea/nuxt3-graphql-codegen-module
https://github.com/newbeea/nuxt3-graphql-codegen-module
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/newbeea/nuxt3-graphql-codegen-module
- Owner: newbeea
- Created: 2021-12-24T09:38:23.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-20T07:58:10.000Z (over 2 years ago)
- Last Synced: 2025-03-27T16:11:11.539Z (3 months ago)
- Language: TypeScript
- Size: 52.7 KB
- Stars: 3
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @nuxt3/graphql-codegen-module
Nuxt3 module for graphql code generator
## Installation
```bash
npm i -D @nuxt3/graphql-codegen-module @graphql-codegen/cli graphql
```
install graphql code generator plugin like @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-vue-apollo
## Configuration
```js
// nuxt.config.js
import '@nuxt3/graphql-codegen-module' // import to remove config warning, not necessary
export default {
buildModules: [
'@nuxt3/graphql-codegen-module'
],
graphqlCodegen: {
}
}
```
## Demo
[nuxt3-apollo-starter](https://github.com/newbeea/nuxt3-apollo-starter)
## Usage
write codegen.yml in root folder
For example:
```
schema: generated/schema.graphql
documents: graphql/**/*.graphql
generates:
generated/schema.d.ts:
plugins:
- typescript
generated/operations.ts:
config:
documentMode: documentNode
plugins:
- typescript
- typescript-operations
- typescript-vue-apollo
```
Code will be generated to generated/operations.ts:
```
// types
// operation code
// like:
/**
* __useCountryQuery__
*
* To run a query within a Vue component, call `useCountryQuery` and pass it any options that fit your needs.
* When your component renders, `useCountryQuery` returns an object from Apollo Client that contains result, loading and error properties
* you can use to render your UI.
*
* @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
*
* @example
* const { result, loading, error } = useCountryQuery();
*/
export function useCountryQuery(options: VueApolloComposable.UseQueryOptions | VueCompositionApi.Ref> | ReactiveFunction> = {}) {
return VueApolloComposable.useQuery(CountryDocument, {}, options);
}
export type CountryQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn;
```
you can use it with [@nuxt3/apollo-module](https://github.com/newbeea/nuxt3-apollo-module) like this:
```
import { useCountryQuery } from '@/generated/operations'
const { result, loading, error } = await useCountryQuery()
```
## Dev
```
pnpm i
```
```
pnpm run build
```
## License
MIT License © 2021-PRESENT [Phil xu](https://github.com/newbeea)