Setup and options
To get started with Apollo and React, install the
apollo-client npm package, the
react-apollo integration package, and the
graphql-tag library for constructing query documents:
Note: You don’t have to do anything special to get Apollo Client to work in React Native, just install and import it as usual.
To get started using Apollo with React, we need to create an
ApolloClient and an
ApolloClient serves as a central store of query result data which caches and distributes the results of our queries.
ApolloProvider wires that client into our React component hierarchy.
Creating a client
To get started, create an
ApolloClient instance and point it at your GraphQL server:
ApolloClient has some other options which control the behavior of the client, and we’ll see examples of their use throughout this guide.
Creating a provider
To connect your client instance to your component tree, use an
ApolloProvider component. You should be sure to place the
ApolloProvider somewhere high in your view hierarchy, above any places where you need to access GraphQL data.
graphql() container is the recommended approach for fetching data or making mutations. It is a Higher Order Component for providing Apollo data to a component, or attaching mutations.
The basic usage of
graphql() is as follows:
If you are using ES2016 decorators, you may prefer the decorator syntax:
In this guide, we won’t use the decorator syntax to make the code more familiar, but you can always use it if you prefer.
To see the complete API for the
graphql() function be sure to checkout the API reference.