• Docs
  • Pricing
  • Support
  • Blog
  • Login

›On the frontend

Intro

  • What's OneGraph?
  • How does it work?
  • Creating your first app
  • Making your first query
  • OneGraphiQL
  • Authentication & Security Overview
  • Custom Google Auth

On the frontend

  • Using with Apollo
  • Log in to services
  • Example with create-react-app

External Authentication

  • What are JWTs?
  • AuthGuardian
  • Securing your Apollo server
  • Securing your Hasura API
  • Securing your Netlify site
  • Securing your express.js app
  • Advanced JWT customization with webhooks

Subscriptions

  • Subscriptions
  • Webhook-based subscriptions
  • Websocket-based subscriptions
  • Salesforce subscriptions
  • GitHub subscriptions
  • Gmail Subscriptions

Advanced

  • Persisted Queries
  • Mailchimp Signup with Persisted Queries

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.

← Custom Google AuthLog in to services →
Links
OneGraph Overview Example projectsOneGraphiQL Explorer
Support
Live chat on Spectrum> TwitterBlog
More
Terms of ServicePrivacy Policy
Copyright © 2021 OneGraph