Registry / api / nuxt-graphql-request

nuxt-graphql-request

library8.1.1jsnpmunverified

Nuxt module that integrates graphql-request, a minimal GraphQL client, into Nuxt.js. Current stable version is 8.1.1 (Nuxt 3) while v6 is available for Nuxt 2. Actively maintained with regular releases. Key differentiators: simple setup, TypeScript support, runtime config for endpoints, multiple client support. Requires graphql peer dependency (14.x || 15.x || 16.x).

api

npm install nuxt-graphql-request

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NUXT-GRAPHQL-REQUE

nuxt-graphql-request

apijavascriptv8.1.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

gql

✓ import { gql } from 'nuxt-graphql-request/utils'

✗ import { gql } from 'nuxt-graphql-request'

gql is re-exported from graphql-tag and is available under /utils subpath.

$graphql

✓ const { $graphql } = useNuxtApp()

✗ const $graphql = useNuxtApp().$graphql

$graphql is an auto-injected Nuxt plugin at runtime, not imported directly.

gql (type import)

✓ import type { DocumentNode } from 'graphql'; const gql: (strings: TemplateStringsArray) => DocumentNode;

✗ import { gql } from 'nuxt-graphql-request'

The type of gql tags is DocumentNode from graphql; no separate type export.

Basic setup with GraphQL client, useAsyncData, and template rendering in Nuxt 3.

// nuxt.config.js export default { modules: ['nuxt-graphql-request'], graphql: { clients: { default: { endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index', } } } }; // pages/index.vue <script setup> import { gql } from 'nuxt-graphql-request/utils'; const { $graphql } = useNuxtApp(); const query = gql` query planets { allPlanets { planets { id name } } } `; const { data } = await useAsyncData('planets', () => $graphql.default.request(query).then(r => r.allPlanets.planets) ); </script> <template> <ul><li v-for="p in data" :key="p.id">{{ p.name }}</li></ul> </template>

Debug

Known issues

breakingModule ships with graphql-request v5; breaking changes from v4 (e.g. request() returns full response, not just data).

fix

Access response data via response object: const { data } = await $graphql.default.request(query);

affects: >=8.0.0

breakingNuxt 3 only; for Nuxt 2 use v6.

fix

Use 'nuxt-graphql-request@v6' for Nuxt 2 projects.

affects: >=7.0.0

deprecatedgql import path moved to 'nuxt-graphql-request/utils' in v8; importing from 'nuxt-graphql-request' may stop working.

fix

Change import to: import { gql } from 'nuxt-graphql-request/utils';

affects: >=8.0.0

gotchaTypeScript requires extending .nuxt/tsconfig.json for full auto-completion of injected $graphql.

fix

Add "extends": "./.nuxt/tsconfig.json" to your tsconfig.json.

affects: >=7.0.0

gotchagraphql package must be installed as a dependency (not devDependency) for client-side usage.

fix

npm install graphql

affects: >=7.0.0

Errors

Common errors & fixes

Cannot find module 'nuxt-graphql-request' or its corresponding type declarations.

Missing TypeScript configuration to extend Nuxt's auto-generated types.

fix

In tsconfig.json: { "extends": "./.nuxt/tsconfig.json" }

Cannot use import statement outside a module.

Using ESM import syntax in a CommonJS file or without 'type':'module' in package.json.

fix

Ensure your file is .mjs or add 'type':'module' to package.json.

$graphql is not defined

Forgetting to use useNuxtApp() or module not installed properly.

fix

const { $graphql } = useNuxtApp(); and verify module in nuxt.config

gql is not a function

Incorrect import path; gql is under /utils.

fix

import { gql } from 'nuxt-graphql-request/utils';

Upgrade

Version history

8.1.1latest on npm

Audit

Dependencies

graphqloptionalpeer dependency required to install

Agent activity

33 hits · last 30 days

node

Resources

githubhttps://github.com/Gomah/nuxt-graphql-request ↗

packagenuxt-graphql-request ↗

homepagehttps://github.com/Gomah/nuxt-graphql-request ↗