Link Search Menu Expand Document
Next Right Now

How to use GraphQL

Advices and “must-know” things regarding GraphQL usage.

Table of contents

Configure in-editor GraphQL support, for WebStorm IDE

Install JS GraphQL IntelliJ Plugin: GraphQL language support for WebStorm, IntelliJ IDEA and other IDEs based on the IntelliJ Platform.

The plugin is available using WebStorm directly. To install it, open your IDE “Settings”, “Plugins”, “Marketplace” and search for “GraphQL”.

The plugin is built-in and should be available as soon as you open the project using WebStorm.

The usage of both gql and the IntelliJ GraphQL plugin is awesome, it allows writing GraphQL queries (see src/gql) and have auto-completion and validation from WebStorm itself.

To refresh the GraphQL spec, just run the .graphqlconfig file by opening it and run the stage you want to sync (usually staging).

Dependencies

GraphQL deps

  • graphql: Client for connecting to a GraphQL endpoint.
  • graphql-tag: Helpful utilities for parsing GraphQL queries. Useful to write plain-text GraphQL query using the gql tag, that can be validated by other tools, such as JS GraphQL IntelliJ Plugin.

react-apollo deps

We use Apollo to manipulate our GraphQL endpoint.

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used.

  • apollo-boost: Apollo Boost is a zero-config way to start using Apollo Client. It includes some sensible defaults, such as our recommended InMemoryCache and HttpLink, which come configured for you with our recommended settings. Even though it may seems unused, this package is required as peer-dependency.
  • apollo-cache-inmemory: Recommended cache implementation for Apollo Client 2.0. InMemoryCache is a normalized data store that supports all of Apollo Client 1.0’s features without the dependency on Redux.
  • apollo-client: Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.
  • apollo-link-http: The http link is a terminating link that fetches GraphQL results from a GraphQL endpoint over an http connection.
  • react-apollo: React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to do server-side rendering.

Our implementation is based on this example and uses the react hooks recent feature.

It works fine with both SSR and client-side navigation.

A universal HOC is used to fetch data from our GraphQL endpoint: withUniversalGraphQLDataLoader. (both from browser and SSR)

We provide some headers on-the-fly (for I18n), that are added per-query basis.