@diizzayy/gql

⚡️ Minimal GraphQL Client + Code Generation for Nuxt 3

⚡️ Minimal GraphQL Client + Code Generation for Nuxt 3

Features

• Zero Configuration
• 🚀 Nuxt 3 Support
• Full Typescript Support
• HMR (Hot Module Reload) for GraphQL documents
• Minimal GraphQL Client + Code Generation

Install

1# using yarn
2yarn add @diizzayy/gql
3
4# using npm
5npm install @diizzayy/gql --save

Usage

Nuxt

1. Add @diizzayy/gql to the buildModules section of nuxt.config.ts Configuration Options

1import { defineNuxtConfig } from 'nuxt3'
2
3export default defineNuxtConfig({
4  buildModules: ['@diizzayy/gql'],
5
6  gql: {
7    // configuration
8  },
9})

2. Set runtime config GQL_HOST to the URL of your GraphQL API

1publicRuntimeConfig: {
2  GQL_HOST: 'https://api.spacex.land/graphql' // SpaceX GraphQL API for example
3}

3. 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.

1query launches($sort: String = "launch_year", $order: String = "desc") {
2  launches(sort: $sort, order: $order, find: { mission_name: "Starlink" }) {
3    id
4    details
5    mission_name
6    launch_year
7    launch_success
8    links {
9      article_link
10      flickr_images
11    }
12    rocket {
13      rocket_name
14      rocket_type
15    }
16  }
17}

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

1. ⚡️ You're ready to go!

Run yarn dev for the @diizzayy/gql 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-imported useGql composable to execute all your queries / mutations.
• With autoImport enabled, your queries / mutations are accessible within your app by calling the Operation name prefixed by Function Prefix

1<script lang="ts" setup>
2const { data } = await useAsyncData('starlink', () => GqlLaunches({ order: 'desc' }))
3</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

1import { defineNuxtConfig } from 'nuxt3'
2
3export default defineNuxtConfig({
4  gql: {
5    /**
6     * Prevent codegen from printing to console in dev mode
7     *
8     * @type boolean
9     * @default true
10     */
11    silent: boolean,
12
13    /**
14     * Enable hot reloading for GraphQL documents
15     *
16     * @type boolean
17     * @default true
18     */
19    watch: boolean,
20
21    /**
22     * Auto import functions based on the operation names of your queries & mutations
23     *
24     * @type boolean
25     * @default true
26     */
27    autoImport: boolean,
28
29    /**
30     * Prefix for auto imported functions
31     *
32     * @type string
33     * @default 'Gql'
34     */
35    functionPrefix: string,
36
37    /**
38     * Path to folder(s) containing .gql or .graphql files. Can be omitted,
39     * module will automatically search for GraphQL Documents in the project's root directory.
40     *
41     * @note Useful for mono repos.
42     *
43     * @type string[]
44     * @example ['../shared/queries']
45     * */
46    documentPaths: string[],
47
48    /**
49     * Only generate the types for the operations in your GraphQL documents.
50     * When set to true, only the types needed for your operations will be generated.
51     * When set to false, all types from the GraphQL schema will be generated.
52     *
53     * @type boolean
54     * @default true
55     * */
56    onlyOperationTypes: boolean
57  },
58
59  publicRuntimeConfig: {
60    /**
61     * URL pointing to a GraphQL endpoint
62     *
63     * @type string
64     */
65    GQL_HOST: string,
66  },
67})

License

MIT License © 2022 Diizzayy