nuxt-graphql-client
⚡️ Minimal GraphQL Client + Code Generation for Nuxt
Features
- Zero Configuration
-
🚀 Nuxt 3 Support - Full Typescript Support
- HMR (Hot Module Reload) for GraphQL documents
- Minimal GraphQL Client + Code Generation
Install
# using yarn
yarn add nuxt-graphql-client
# using npm
npm install nuxt-graphql-client --save
Usage
Nuxt
- Add
nuxt-graphql-clientto thebuildModulessection ofnuxt.config.tsConfiguration Options
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
buildModules: ['nuxt-graphql-client'],
gql: {
// configuration
},
})
- Set runtime config
GQL_HOSTto the URL of your GraphQL API
publicRuntimeConfig: {
GQL_HOST: 'https://api.spacex.land/graphql' // SpaceX GraphQL API for example
}
- Write your GraphQL Queries / Mutations. (Must be written in .gql / .graphql files)
Example using the SpaceX GraphQL API:
./queries/starlink.gql - This query will for the SpaceX API to retrieve the launches for Starlink missions.
query launches($sort: String = "launch_year", $order: String = "desc") {
launches(sort: $sort, order: $order, find: { mission_name: "Starlink" }) {
id
details
mission_name
launch_year
launch_success
links {
article_link
flickr_images
}
rocket {
rocket_name
rocket_type
}
}
}
With autoImport enabled, the query above can be accessed in the Vue portion of your app by prefixing the Operation name (launches in this example with the Function Prefix). The launches query can be executed as GqlLaunches()
-
⚡️ You're ready to go!
Run yarn dev for the nuxt-graphql-client module to generate the necessary types and functions.
- HMR (Hot Module Reload) for your GraphQL documents.
- Access the types from the GraphQL document(s) that you've written.
-
🚀 Utilize the auto-importeduseGqlcomposable to execute all your queries / mutations. - With
autoImportenabled, your queries / mutations are accessible within your app by calling the Operation name prefixed by Function Prefix
<script lang="ts" setup>
const { data } = await useAsyncData('starlink', () => GqlLaunches({ order: 'desc' }))
</script>
Your data is now fully-typed based on it's pertinent GraphQL Document.
Configuration
This module can be configured by adding a gql section inside your nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
gql: {
/**
* Prevent codegen from printing to console in dev mode
*
* @type boolean
* @default true
*/
silent: boolean,
/**
* Enable hot reloading for GraphQL documents
*
* @type boolean
* @default true
*/
watch: boolean,
/**
* Auto import functions based on the operation names of your queries & mutations
*
* @type boolean
* @default true
*/
autoImport: boolean,
/**
* Prefix for auto imported functions
*
* @type string
* @default 'Gql'
*/
functionPrefix: string,
/**
* Path to folder(s) containing .gql or .graphql files. Can be omitted,
* module will automatically search for GraphQL Documents in the project's root directory.
*
* @note Useful for mono repos.
*
* @type string[]
* @example ['../shared/queries']
* */
documentPaths: string[],
/**
* Only generate the types for the operations in your GraphQL documents.
* When set to true, only the types needed for your operations will be generated.
* When set to false, all types from the GraphQL API will be generated.
*
* @type boolean
* @default true
* */
onlyOperationTypes: boolean
/**
* Allows generating multiple clients with different GraphQL hosts.
*
* @note this option overrides the `GQL_HOST` in `publicRuntimeConfig`.
* */
clients: GqlClientOptions[]
},
publicRuntimeConfig: {
/**
* URL pointing to a GraphQL endpoint
*
* @type string
*/
GQL_HOST: string,
},
})
Credits
nuxt-graphql-client is developed by @diizzayy.
Special thanks to @danielroe for helping me navigate and making this possible!
19 Dec 17, 2022
3 Sep 22, 2022
4 Jun 11, 2022
5 May 30, 2022
163 Jan 3, 2023
15 Dec 25, 2022
639 Jan 8, 2023
15 Dec 3, 2022
5 May 24, 2022
231 Dec 30, 2022
208 Dec 27, 2022
128 Jan 7, 2023
25 Dec 15, 2022
26 Dec 27, 2022
10 Dec 24, 2022