nuxt-graphql-client

nuxt-graphql-client

⚡️ Minimal GraphQL Client + Code Generation for Nuxt

⚡️ 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

1. Add nuxt-graphql-client to the buildModules section of nuxt.config.ts Configuration Options

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: ['nuxt-graphql-client'],

  gql: {
    // configuration
  },
})

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

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

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

1. ⚡️ 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-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

<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!

License

MIT License © 2022 Diizzayy