@enjoylife/fusion-apollo
v2.0.0-alpha
Published
FusionJS entry point for React universal rendering /w Apollo
Downloads
13
Readme
fusion-apollo
Fusion.js plugin for universal rendering with React and Apollo
This package provides universal rendering for Fusion.js applications leveraging GraphQL.
The plugin will perform graphql queries on the server, thereby rendering your applications initial HTML view on the server before sending it to the client. Additionally this plugin will also provide initial state hydration on the client side.
Table of contents
Installation
yarn add fusion-apollo
Usage
// ./src/main.js
import React from 'react';
import App from 'fusion-react';
import {RenderToken} from 'fusion-core';
// New import provided by this plugin
import ApolloPlugin, {ApolloClientToken} from 'fusion-apollo';
// A barebones Apollo Client
import ApolloClient from 'fusion-apollo-universal-client';
export default function() {
const app = new App(<Hello />);
app.register(RenderToken, ApolloPlugin)
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');
API
ApolloClientToken
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.
Types
type ApolloClient<TInitialState> = (ctx: Context, initialState: TInitialState) => ApolloClientType;
ApolloContextToken
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.
Types
type ApolloContext<T> = (ctx: Context => T) | T;
GraphQLSchemaToken
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.
Types
type GraphQLSchema = string;
Plugin
import ApolloPlugin from 'fusion-apollo';
A plugin which is responsible for rendering (both virtual DOM and server-side rendering).
gql
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.
Types
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.