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.