Additionally, hops-graphql features a CLI tool to help working with GraphQL schemas.
To use hops-graphql, you need to add it and its dependencies to an existing project that already has hops-react installed.
npm install --save hops-graphql react react-apollo graphql-tag
Generally, you will use hops-react exactly as you would use a well configured Apollo Client. hops-graphql only adds a bit of convenience and works out-of-the-box with the other Hops components.
Add your GraphQL endpoint to your Hops config - usually, this means adding a line with your GraphQL endpoint's full URL to your project's
For more elaborate (e.g. environment specific configs), please refer to the hops-config docs.
To allow you to work with fragments on interfaces or unions with GraphQL, you need to provide additional information derived from your actual schema to the client. To fetch and supply that info, please run the command provided by this package in your project's root folder:
hops graphql introspect
The generated file,
fragmentTypes.json will be picked up automatically by hops-graphql. Please make sure to commit it to version control.
createContext() is hops-graphql's main export. It is based on the implementation in hops-redux and accepts the same options plus a
||querySelector identifying the root DOM node|
||template function supporting all React Helmet and hops-react features|
||object literal containing options directly passed to the
Defaults for the
graphql config are very similar to those in the default implementation with the exception that
hopsConfig.graphqlUri is being used as HTTP endpoint.
This constructor function is an advanced API feature, meant to help you build your own context factory functions. For more info, please read up on hops-react render contexts.
;;;const withHero = ;const Home =loading ?<p>Loading...</p>:<p>heroname: heroheight</p>;Home;