@diizzayy/gql

⚡️ Minimal GraphQL Client + GraphQL Code Generation for Nuxt 3

Features

• Zero Configuration
• 🚀 Nuxt 3 Support
• Full Typescript Support
• Minimal GraphQL Client + GraphQL Code Generation

Install

# using yarn
yarn add @diizzayy/gql

# using npm
npm install @diizzayy/gql --save

Usage

Nuxt

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

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: ['@diizzayy/gql'],

  gql: {
    // configuration
  },
})

2. 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
}

3. Write your GraphQL Queries / Mutations. (Must be written within .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
    }
  }
}

4. ⚡️ You're ready to go!

Run yarn dev for the @diizzayy/gql module to generate the necessary types and functions.

• Access the types from the GraphQL document(s) that you've written.
• 🚀 Utilize the auto-imported useGql composable to execute all your queries / mutations.

<script lang="ts" setup>
const { data } = await useAsyncData('starlink', () =>
  useGql().launches({ order: 'desc' })
)
</script>

Your data is now fully-typed based it's pertinent GraphQL Document.

Important!

The useGql composable is only imported and accessible to your app after any of the conditions below have been met:

• You've written GraphQL document(s) in the root dir of your project.
• using documentPaths to reference one or more directory containing GraphQL document(s).

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
     *
     * @type boolean
     * @default true
     */
    silent: boolean,

    /**
     * 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.
     *
     * @type string[]
     * @example ['../queries', '../mutations']
     * */
    documentPaths: string[],
  },

  publicRuntimeConfig: {
    /**
     * URL pointing to a GraphQL endpoint
     *
     * @type string
     */
    GQL_HOST: string,
  },
})

License

MIT License © 2022 Diizzayy