Git Product home page Git Product logo

fusion-apollo's Introduction

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


Installation

yarn add fusion-apollo

Usage

// ./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;
}

API

Registration 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-tooks repo.

Types
type GraphQLSchema = string;

App

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.

Constructor

const app: App = new App(el: ReactElement);
  • el: ReactElement - a template root. In a React application, this would be a React element created via React.createElement or a JSX expression.

app.(register|middleware|enhance|cleanup)

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.


Providers

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

fusion-apollo's People

Contributors

alexmsmithca avatar kevhuang avatar kevingrandon avatar nadiia avatar renovate-bot avatar renovate[bot] avatar simonrobb avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.