{"library":"nuxt-graphql-client","title":"Nuxt GraphQL Client","description":"nuxt-graphql-client is a comprehensive Nuxt 3 module designed to integrate GraphQL client capabilities with built-in code generation. Currently at version 0.2.46, the package sees frequent patch releases, indicating active development and responsiveness to bug fixes and minor feature enhancements. It leverages `graphql-request` for executing GraphQL operations and `graphql-code-generator` to automatically generate TypeScript types and composables (`useGql`, `useAsyncGql`, `Gql<OperationName>`) directly from your GraphQL schema and `.gql` files. This approach ensures full TypeScript support and Hot Module Reload (HMR) for GraphQL documents. Its key differentiators include a 'zero configuration' option for rapid setup, deep integration with the Nuxt 3 reactivity system and composables, and streamlined developer experience by automating boilerplate for GraphQL interactions, providing a modern alternative to more manually configured GraphQL client setups in Nuxt applications.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install nuxt-graphql-client"],"cli":null},"imports":["import { useGql } from '#graphql-client/composables';","import { useAsyncGql } from '#graphql-client/composables';","const { data } = await GqlGetUsers();","import { useGqlToken } from '#graphql-client/composables';","import { GqlError } from '#graphql-client/types';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// nuxt.config.ts\nimport { defineNuxtConfig } from 'nuxt/config';\n\nexport default defineNuxtConfig({\n  modules: ['nuxt-graphql-client'],\n  runtimeConfig: {\n    public: {\n      graphqlClient: {\n        clients: {\n          default: {\n            host: process.env.NUXT_PUBLIC_GQL_HOST ?? 'https://graphqlzero.almansi.me/api' // Example host\n          }\n        }\n      }\n    }\n  }\n});\n\n// graphql/GetUsers.gql (create this file in your project root or `server/` dir)\nquery GetUsers($options: PageQueryOptions) {\n  users(options: $options) {\n    data {\n      id\n      name\n      email\n    }\n  }\n}\n\n// pages/index.vue\n<template>\n  <div>\n    <h1>Users</h1>\n    <p v-if=\"pending\">Loading...</p>\n    <p v-if=\"error\">Error: {{ error?.message }}</p>\n    <ul v-if=\"data?.users?.data\">\n      <li v-for=\"user in data.users.data\" :key=\"user.id\">{{ user.name }} ({{ user.email }})</li>\n    </ul>\n    <button @click=\"refresh\">Refresh</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n// Automatically generated function GqlGetUsers from graphql/GetUsers.gql\nconst { data, pending, error, refresh } = await useAsyncGql('GetUsers', {\n  options: { paginate: { limit: 5 } }\n});\n\n// Example of setting an authentication token\n// useGqlToken(process.env.NUXT_PUBLIC_AUTH_TOKEN ?? 'your-secret-token');\n</script>","lang":"typescript","description":"Demonstrates how to configure the module, define a simple GraphQL query in a `.gql` file, and fetch data using the `useAsyncGql` composable within a Nuxt page, complete with loading and error states.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}