Apollo boost is deprecated, update code exporter snippet for react-apollo

Issues Dgraph Cloud / Slash GraphQL
1

According to Apollo client v3 documentation:

The Apollo Boost project is now retired, because Apollo Client 3.0 provides a similarly straightforward setup. We recommend removing all apollo-boost dependencies and modifying your ApolloClient constructor as needed.

The code snippet provided by Slash for react-apollo should be updated:

/* This is an example snippet - you should consider tailoring it
to your service.
*/
/*
  Add these to your `package.json`:
    "apollo-boost": "^0.3.1",
    "graphql": "^14.2.1",
    "graphql-tag": "^2.10.0",
    "react-apollo": "^2.5.5"
*/

import gql from "graphql-tag";
import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, InMemoryCache, HttpLink } from "apollo-boost";
import { Query, ApolloProvider } from "react-apollo";

// This setup is only needed once per application;
const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: "https://different-squirrel.ap-south-1.aws.cloud.dgraph.io/graphql",
  }),
});

const RANDOM_QUOTE_QUERY = gql`
  query RandomQuote {
    queryQuotation(first: 1, offset: 13) {
      quotationText
      location
    }
  }
`;

const RandomQuoteQuery = (props) => {
  return (
    <Query
      query={RANDOM_QUOTE_QUERY}
      context={{ headers: {"Content-Type": "application/json"} }} >
      {({ loading, error, data }) => {
        if (loading) return <pre>Loading</pre>
        if (error)
          return (
            <pre>
              Error in RANDOM_QUOTE_QUERY
              {JSON.stringify(error, null, 2)}
            </pre>
          );
    
        if (data) {
          return (
            <pre>{JSON.stringify(data, null, 2)}</pre>
          )
        }
      }}
    </Query>
  )
};

const container = (
  <ApolloProvider client={apolloClient}>
    <RandomQuoteQuery  />
  </ApolloProvider>
);

ReactDOM.render(container, document.getElementById("root"));
1 Like