sk-graphql-client
v0.0.3
Published
A wrapper around isomorphic fetch that makes dealing with GraphQL querys a bit simpler
Downloads
3
Maintainers
Readme
sk-graphql-client
A wrapper around isomorphic fetch that makes dealing with GraphQL a bit simpler.
Install
npm install --save sk-graphql-client
API
New Client
new SKGraphQLClient({options})
import SKGraphQLClient from 'sk-graphql-client';
const client = new SKGraphQLClient({
endpoint: 'http://graphql-swapi.parseapp.com/'
});
{options}
endpoint (String)
: A GraphQL endpoint.catchGraphQLErrors (Bool)
: Whether to catch GraphQL error. Defaults totrue
. See Errors for more information.
Query
For now it's only basic queries—Fragments will come soon.
client.query(graphQLQuery, graphQLVariables)
const graphQLQuery = `{
hero(episode: $episode) {
name,
friends {
name
}
}
}`;
const graphQLVariables = {
episode: "JEDI"
};
client.query(graphQLQuery, graphQLVariables)
.then(res => {
console.log(res.hero);
});
Mutation
You can also use mutation queries easily. The string mutation
will be prepended to your query for you unless you add it yourself.
client.mutation(graphQLQuery, graphQLVariables)
const graphQLMutation = `CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
createReview(episode: $ep, review: $review) {
stars
commentary
}
}`;
const graphQLVariables = {
ep: 'JEDI',
review: {
stars: 5,
commentary: 'This is a great movie!'
}
};
client.query(graphQLQuery, graphQLVariables)
.then(res => {
console.log(res.createReview);
});
Errors
All GraphQL errors are thrown by default. This means you can catch them when you call .query
or .mutate
. You can disable the catching of GraphQL errors when you initialise a new client with the catchGraphQLErrors: false
option.
Fetch response errors are always thrown as a standard JavaScript Error
with the response status and status text.
const graphQLQuery = `{
queryThatThrows {
id
}
}`;
client.query(graphQLQuery)
.catch(error => {
// A list of GraphQL Errors
if (Array.isArray(error)) {
error.forEach(graphQLError => {
console.log(graphQLError);
});
}
// A fetch error
console.log(`${error.status} - ${error.message}`);
});