Easy Minimal GraphQL client integration with Nuxt.js.
- Most simple and lightweight GraphQL client.
- Promise-based API (works with
async
/await
). - Typescript support.
- AST support.
- GraphQL Loader support.
Install with yarn:
yarn add nuxt-graphql-request graphql --dev
Install with npm:
npm install nuxt-graphql-request graphql --save-dev
nuxt.config.js
module.exports = {
buildModules: ['nuxt-graphql-request'],
graphql: {
/**
* Your GraphQL endpoint
*/
endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
/**
* Options
* See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
*/
options: {},
/**
* Optional
* default: true (this includes cross-fetch/polyfill before creating the graphql client)
*/
useFetchPolyfill: true,
/**
* Optional
* default: false (this includes graphql-tag for node_modules folder)
*/
includeNodeModules: true,
},
};
If you need to supply your endpoint at runtime, rather than build time, you can use the Runtime Config to provide this value:
nuxt.config.js
module.exports = {
publicRuntimeConfig: {
GRAPHQL_ENDPOINT: '<your endpoint>',
},
};
asyncData
import { gql } from 'graphql-request';
async asyncData({ $graphql, params }) {
const query = gql`
query planets {
allPlanets {
planets {
id
name
}
}
}
`;
const planets = await $graphql.request(query);
return { planets };
}
methods
/created
/mounted
/etc
import { gql } from 'graphql-request';
methods: {
async fetchSomething() {
const query = gql`
query planets {
allPlanets {
planets {
id
name
}
}
}
`;
const planets = await $graphql.request(query);
this.$set(this, 'planets', planets);
}
}
import { gql } from 'graphql-request';
// In store
{
actions: {
async fetchAllPlanets ({ commit }) {
const query = gql`
query planets {
allPlanets {
planets {
id
name
}
}
}
`;
const planets = await this.$graphql.request(query);
commit('SET_PLANETS', planets)
}
}
}
Examples from the official graphql-request library.
In nuxt.config.ts
// nuxt.config.ts
module.exports = {
graphql: {
endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
options: {
headers: {
authorization: 'Bearer MY_TOKEN',
},
},
},
};
Or using setHeaders / setHeader:
this.$graphql.setHeaders({ authorization: 'Bearer MY_TOKEN' });
this.$graphql.setHeader('authorization', 'Bearer MY_TOKEN');
In nuxt.config.ts:
// nuxt.config.ts
module.exports = {
graphql: {
endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
options: {
credentials: 'include',
mode: 'cors',
},
},
};
Or using setHeaders / setHeader:
this.$graphql.setHeaders({
credentials: 'include',
mode: 'cors',
});
this.$graphql.setHeader('credentials', 'include');
this.$graphql.setHeader('mode', 'cors');
import { gql } from 'graphql-request';
const query = gql`
query planets($first: Int) {
allPlanets(first: $first) {
planets {
id
name
}
}
}
`;
const variables = { first: 10 };
const planets = await $graphql.request(query, variables);
The request
method will return the data
or errors
key from the response. If you need to access the extensions
key you can use the rawRequest
method:
import { gql } from 'graphql-request';
const query = gql`
query planets($first: Int) {
allPlanets(first: $first) {
planets {
id
name
}
}
}
`;
const variables = { first: 10 };
const { data, errors, extensions, headers, status } = await $graphql.rawRequest(
endpoint,
query,
variables
);
console.log(JSON.stringify({ data, errors, extensions, headers, status }, undefined, 2));
Don't get me wrong, Apollo Client is great and well maintained by the vue / nuxt community, I used Apollo Client for 18months before switching to graphql-request.
However, as I am obsessed with performances, Apollo Client doesn't work for me at all:
- I don't need another state management as the Vue ecosystem is enough (Vuex & Persisted data).
- I don't need an extra ~120kb parsed in my app for fetching my data.
- I don't need subscriptions as I use pusher.com, there are also alternatives for a WS client: http://github.com/lunchboxer/graphql-subscriptions-client
graphql-request
uses a TypeScript type from the graphql
package such that if you are using TypeScript to build your project and you are using graphql-request
but don't have graphql
installed TypeScript build will fail. Details here. If you are a JS user then you do not technically need to install graphql
. However, if you use an IDE that picks up TS types even for JS (like VSCode) then it's still in your interest to install graphql
so that you can benefit from enhanced type safety during development.
No. It is there for convenience so that you can get the tooling support like prettier formatting and IDE syntax highlighting. You can use gql
from graphql-tag
if you need it for some reason too.
graphql-request
is the most minimal and simplest to use GraphQL client. It's perfect for small scripts or simple apps.
Compared to GraphQL clients like Apollo or Relay, graphql-request
doesn't have a built-in cache and has no integrations for frontend frameworks. The goal is to keep the package and API as minimal as possible.
Sure, you can perform any GraphQL queries & mutations as before π
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn dev
ornpm run dev
- Support multiple clients
- Support WebSocket client?
- Expose
request
function for running GraphQL queries/mutations as a static function.