FusionJS entry point for React universal rendering /w Apollo

Usage no npm install needed!

<script type="module">
  import fusionApollo from 'https://cdn.skypack.dev/fusion-apollo';



Build status

Fusion.js entry point for React universal rendering with Apollo

Provides a Fusion.js application class that is pre-configured with React and Apollo universal rendering for applications leveraging GraphQL.

The App class from this package should be used when you want to perform both server and client rendering with GraphQL querying. This package will also provide initial state hydration on the client.

Table of contents


yarn add fusion-apollo


// ./src/main.js
import React from 'react';
import App, {ApolloClientToken} from 'fusion-apollo';
import ApolloClient from 'fusion-apollo-universal-client';

export default function() {
  const app = new App(<Hello />);
  app.register(ApolloClientToken, ApolloClient);
  return app;

Loading GraphQL Queries/Schemas

fusion-apollo ships with a compiler plugin that lets you load graphql queries and schemas with the gql macro. This macro takes a relative path argument and returns the query/schema as a string.

NOTE: Because this is a build time feature, the path argument must be a string literal. Dynamic paths are not supported.

import {gql} from 'fusion-apollo';
const query = gql('./some-query.graphql');
const schema = gql('./some-schema.graphql');


Registration API

import {ApolloClientToken} from 'fusion-apollo';

A plugin, which provides an instance of Apollo Client, to be registered and used as within the Apollo Provider. You can use fusion-apollo-universal-client as a barebones Apollo Client token.

type ApolloClient<TInitialState> = (ctx: Context, initialState: TInitialState) => ApolloClientType;
import {ApolloContextToken} from 'fusion-apollo';

Allows registration of a context object which gets passed into every resolver. See the Apollo Client context documentation for more details.

type ApolloContext<T> = (ctx: Context => T) | T;
import {GraphQLSchemaToken} from 'fusion-apollo';

Define the GraphQLSchemaToken when using a locally hosted GraphQL endpoint from within a Fusion.js application. Connect your schema to a Fusion.js server with fusion-plugin-apollo-server. You can find an example schema in the graphql-tools repo.

type GraphQLSchema = string;


import App from 'fusion-apollo';

A class that represents an application. An application is responsible for rendering (both virtual DOM and server-side rendering). The functionality of an application is extended via plugins.


const app: App = new App(
  (el: ReactElement),
  (render: ?(el: ReactElement) => string)
  • el: ReactElement - a template root. In a React application, this would be a React element created via React.createElement or a JSX expression.
  • render: ?(el:ReactElement) => string - Optional. Defines how rendering should occur.


See the fusion-core app methods for further information on provided methods. Fusion-apollo does not add additional app methods besides the inherited fusion-core methods.


import {gql} from 'fusion-apollo';

A macro for loading graphql queries and schemas. Takes a relative path string and returns the contents of the graphql schema/query as a string.

type gql = (path: string): string
  • path: string - Relative path to the graphql schema/query file. NOTE: This must be a string literal, dynamic paths are not supported.


As a convenience, fusion-apollo re-exports providers from fusion-react. You can find additional information on those as follows: