Set up OneGraph with Apollo

Apollo is the most popular way to integrate GraphQL into your app. It has integrations with almost any client platform, from web, to React Native, to native Android.

It only takes a few extra lines to set up Apollo to talk to OneGraph. We'll be focusing on React applications in the doc, but the examples will work no matter where you use Apollo.

Installation

In your javascript project, add the apollo dependencies:

npm install apollo-boost react-apollo@beta graphql --save

Create a client

You'll need your app id for this. If you don't have one already, create an app from the OneGraph Dashboard

import ApolloClient from 'apollo-boost';

const APP_ID = YOUR_APP_ID;

const client = new ApolloClient({
  uri: 'https://serve.onegraph.com/graphql?app_id=' + APP_ID,
});

If you're already familiar with Apollo, that should be all you need to start making queries with OneGraph! You can skip to authentication to learn how to access private data.

Create a provider

To connect your client to your React components, you'll use an ApolloProvider component. The ApolloProvider handles fetching queries, storing data, and connecting that data to your components.

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

import React from 'react';
import ReactDOM from 'react-dom';

const APP_ID = YOUR_APP_ID;

const client = new ApolloClient({
  uri: 'https://serve.onegraph.com/graphql?app_id=' + APP_ID,
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <div>Nothing to see here, yet!</div>
  </ApolloProvider>,
  document.getElementById('root'),
);

Fetch and render data

We'll write our query as a string and use the gql function to convert it into a format that Apollo can understand. The graphql higher-order component connects our query to our component. You can see how to access the data, loading state, an errors in the full example:

import ApolloClient, {gql} from 'apollo-boost';
import {ApolloProvider, Query} from 'react-apollo';

import React from 'react';
import ReactDOM from 'react-dom';

const APP_ID = YOUR_APP_ID;

const client = new ApolloClient({
  uri: 'https://serve.onegraph.com/graphql?app_id=' + APP_ID,
});

const GET_PACKAGE = gql`
  query {
    npm {
      package(name: "graphql") {
        name
        homepage
        description
      }
    }
  }
`;

const MyApp = () => (
  <Query query={GET_PACKAGE}>
    {({loading, error, data}) => {
      if (loading) return <div>Loading...</div>;
      if (error) return <div>Uh oh, something went wrong!</div>;
      const pkg = data.npm.package;
      if (!pkg) return <div>No npm package for graphql</div>;
      return (
        <div>
          <a href={pkg.homepage}>
            {pkg.name} ({pkg.description})
          </a>
        </div>
      );
    }}
  </Query>
);

ReactDOM.render(
  <ApolloProvider client={client}>
    <MyApp />
  </ApolloProvider>,
  document.getElementById('root'),
);

Now we've set up an Apollo GraphQL client that can fetch data from all the services OneGraph supports, cache it intelligently, and pass it to our components where we need it.

This component makes an anonymous query though, and won't be able to access any of the user's data on, say, Stripe. Let's see how to open up more interesting use cases with OneGraph's cross-service authentication in the browser.