How to use apollo - 10 common examples

// Refs:
// https://stackoverflow.com/questions/40897966/objects-are-not-valid-as-a-react-child-in-internet-explorer-11-for-react-15-4-1#comment69150679_40928047
// https://github.com/facebook/react/issues/8379
import 'babel-polyfill';

import { getUserToken } from 'apollo/tokenStorage';
import configureApolloClient from 'apollo/configureApolloClient';
import Root from './root';

/* eslint-disable no-underscore-dangle,no-undef */
const apiUri = global.__API__;
const initialData = global.__DATA__ || {};

// Load the client's bearer token from browser cookie.
const loadToken = () => getUserToken();
const apolloClient = configureApolloClient(apiUri, loadToken, initialData);

// Find the DOM node generated by the server.
const mountNode = global.document.getElementById('app');

// Encapsulate rendering for hot-reloading.
const render: Function = (Component): void => {
  // $FlowIgnore https://github.com/facebook/flow/pull/5074
  ReactDOM.hydrate(
    ,
    mountNode,
  );
};

if (
  module.hot &&
  module.hot.accept &&

export default (clientStats: Object) => (
  req: express$Request,
  res: express$Response,
): void => {
  const env: Object = req.app.get('env');
  const apiUri = env.API;

  // Use the cookie from the request object to load the token.
  const loadToken = () => getUserToken(req.headers.cookie);
  const apolloClient = configureApolloClient(apiUri, loadToken);

  const Root: React$Element = (
    
      
        
      
    
  );

  // Start profiling of the react rendering with apollo.
  logger.profile('Rendering with data dependencies');

  // Render the app after loading the graphql data.
  const doRenderFinal = doRender(clientStats, apolloClient);

  // Renders the app component tree into a string.

const createHttpLink = (apiUri: string) => {
  if (__DEVELOPMENT__) {
    return new HttpLink({
      // Enable remote xdebug during development.
      uri: `${apiUri}?XDEBUG_SESSION_START=PHPSTORM`,
      headers: {
        Accept: 'application/json',
      },
    });
  }

  return createPersistedBatchLink(apiUri);
}

(async () => {
  try {
    // eslint-disable-next-line no-underscore-dangle
    hydrate(window.__emotion);

    const client = new ApolloClient({
      // eslint-disable-next-line no-underscore-dangle
      initialState: window.__APOLLO_STATE__,
      networkInterface: networkInterface('/graphql'),
      fragmentMatcher,
    });

    const BrowserRouter = await createInitialBrowserRouter({
      historyMiddlewares,
      historyOptions: { useBeforeUnload: true },
      routeConfig,
      render,
    });

    ReactDOM.hydrate(
      
        
          
        
      ,

) {
    // FIXME: This should take includes and excludes from the new config format.
    const queries = config.queries![0];

    this.fileSet = new FileSet({
      rootPath: config.projectFolder,
      includes: queries.includes,
      excludes: queries.excludes
    });

    this.loadSchema();
    this.scanAllIncludedFiles();

    const engineKey = process.env.ENGINE_API_KEY;
    if (engineKey) {
      this.serviceID = getIdFromKey(engineKey);

      this.engineClient = new ApolloEngineClient(
        engineKey,
        this.config.engineEndpoint
      );
      this.loadEngineData();
    } else {
      this.loadingHandler.showError(
        "Apollo: failed to load Engine stats. No ENGINE_API_KEY found in .env"
      );
    }
  }

async canActivate({ postSlug }) {
        try {
            const { data: { post } } = await query(`query {
                post(slug: "${postSlug}") {
                    id,
                    title,
                    body
                }
            }`) as ApolloQueryResult;

            this.post = post;
        } catch (e) {
            throw new Error('Could not load post');
        }
    }
}

async activate() {
        try {
            const { data: { posts } } = await query(`query {
                posts() {
                    id,
                    title,
                    body
                }
            }`) as ApolloQueryResult;

            this.posts = posts;
        } catch (e) {
            throw new Error('Could not load posts');
        }
    }
}

import { InMemoryCache } from 'apollo-cache-inmemory';
import Cookies from 'js-cookie';
import fragmentMatcher from 'tools/fragmentMatcher';
import { TOKEN_KEY } from 'utils/constants';
import apolloClient from 'apollo/client';

const headers = {};
const authToken = Cookies.get(TOKEN_KEY);
if (authToken) {
  headers.Authorization = `Bearer ${authToken}`;
}

export default apolloClient('/graphql', headers, {
  cache: new InMemoryCache({ fragmentMatcher }).restore(window.__APOLLO_STATE__),
});

export default (req, res, next) => {
  const port = parseInt(KYT.SERVER_PORT, 10);
  const uri = `http://localhost:${port}/graphql`;
  const headers = {};
  if (req.cookies.draftAuthToken) {
    headers.Authorization = `Bearer ${req.cookies.draftAuthToken}`;
  }

  res.locals.client = apolloClient(uri, headers, { ssrMode: true });

  next();
};

url: req.url,
      historyMiddlewares,
      routeConfig,
      render,
    });

    if (redirect) {
      res.redirect(302, redirect.url);
      return;
    }

    const port = parseInt(KYT.SERVER_PORT, 10);
    const uri = `http://localhost:${port}/graphql`;
    const client = new ApolloClient({
      ssrMode: true,
      networkInterface: networkInterface(uri),
      fragmentMatcher,
    });

    const app = (
      
        {element}
      
    );

    getDataFromTree(app).then(() => {
      const { html, ids, css } = extractCritical(renderToString(app));

      const initialState = {
        apollo: client.getInitialState(),
      };
      res.status(200);