apollo_mentor_example.tsx

// app.tsx
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
// import Environment from 'app/components/environment';
import AppHeaderLayout from 'app/scenes/app-header-layout';
import DashboardScene from 'app/scenes/dashboard-scene';
import 'assets/styles/shared.scss';
import store from './store';
import link from './services/link-service';

const cache = new InMemoryCache();

const client = new ApolloClient({
  link,
  cache
});

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Provider store={store}>
          <AppHeaderLayout>
            <DashboardScene />
          </AppHeaderLayout>
        </Provider>
      </ApolloProvider>
    );
  }
}

export default App;

// link-service.ts

import { HttpLink } from 'apollo-link-http';
import { ApolloLink, concat } from 'apollo-link';
import auth from '@udacity/ureact-hoth';

export const bffLink = new HttpLink({
  // uri: 'http://dev.udacity.com:4000/graphql'
  uri: 'https://mentor-api-staging.udacity.com/api/v1/graphql'
});

export const authMiddleware = new ApolloLink((operation: any, forward: any) => {
  // add the authorization to the headers
  const jwt = auth.getJWT();
  operation.setContext({
    headers: {
      Authorization: `Bearer ${jwt}`
    }
  });

  return forward(operation);
});

export default concat(authMiddleware, bffLink);


// dashboard-scene.tsx 

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
import styles from './dashboard-scene.module.scss';
import schema from 'app/models/mentors/mentors-schema';
const { Mentors } = schema;

export const DashboardScene = () => {
  return (
    <div className={styles.dashboardLayout}>
      <Query query={gql`{mentors ${Mentors}}`}>
        {({ loading, error, data }) => {
          if (loading) {
            return <p>Loading...</p>;
          }

          if (error) {
            return <p>Error: {JSON.stringify(error)}</p>;
          }

          return (
            <ul>
              {data.mentors.map((mentor) => {
                return (
                  <li key={mentor.uid}>
                    {mentor.uid} | {mentor.paypal_email}
                  </li>
                );
              })}
            </ul>
          );
        }}
      </Query>
    </div>
  );
};

export default DashboardScene;