clarencenpy

import React from 'react';
import { render } from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

// Pass your GraphQL endpoint to uri
const client = new ApolloClient({
  uri: 'https://nx9zvp49q7.lp.gql.zone/graphql'
});

clarencenpy

{
  "errors": [{
    "message": "Something went wrong",
    "locations": [
      {
        "line": 3,
        "column": 5
      }
    ],
  }]

clarencenpy

import { AuthenticationError } from 'apollo-server'
const resolvers = {
  Mutation: {
    protectedAction(root, args , { user }) { 
      if (!user) { 
        throw new AuthenticationError('You must be logged in');
      }
    }
  }
};

clarencenpy

{
  "error": {
    "graphQLErrors": [
      {
        "message": "forbidden",
        "locations": [],
        "path": [
          "protectedAction"
        ],
        "extensions": {

clarencenpy

import { onError } from 'apollo-link-error';
const ReauthenticationLink = onError(
  ({ graphQLErrors, networkError, operation, forward }) => {
    if (graphQLErrors) {
      for (let err of graphQLErrors) {
        // handle errors differently based on its error code
        switch (err.extensions.code) {
          case 'UNAUTHENTICATED':
            // old token has expired throwing AuthenticationError,
            // one way to handle is to obtain a new token and 

clarencenpy

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
const client = new ApolloClient({
  link: ApolloLink.from([
    // other links go here
    ReauthenticatonLink,
    new HttpLink({
      uri: 'http://graphql-endpoint:4000',
    }),

clarencenpy

const typeDefs = gql`
  type MovieSearchResult {
    movies: [Movie]
    recommendedForYou: [Movie]
  }

  type Query {
    searchMovies(keyword: String!): MovieSearchResult!
  }
`

clarencenpy

import React from 'react';
import { Query } from 'react-apollo';

const MovieSearchResults = ({ keyword }) => (
  <Query query={SEARCH_MOVIES} variables={{ keyword }}>
    {(data, loading, error) => {
      if (loading) return <LoadingIndicator />;
      // if networkError is present, we can be sure that no data 
      // was returned. We can simply display an error component.
      if (error && error.networkError) return <ErrorDisplay />;

clarencenpy

const typeDefs = gql`
  type MovieSearchResult {
    movies: [Movie!]!
    recommendedForYou: [Movie!]
  }
  ...
`
// Note: since it makes no sense that we have a null
// Movie returned in the list, we should mark each Movie
// as non-nullable too. 

clarencenpy

{
  "data": {
    "searchMovies": {
      "movies": [
        {
          "name": "Avengers Infinity War",
        }
      ],
      "recommendedForYou": null,
    }