Edit

Add and configure Apollo Client

This article is part of the Storefront UI Development Guide.

• Previous Task: None
• Next Task: Build a product listing page

To add Apollo Client to your UI app, read the excellent Apollo docs. For local development, the Reaction GraphQL endpoint uri is http://localhost:3000/graphql, but we recommend storing that value in app config where it can be set differently per environment.

For your test query, try this:

import gql from "graphql-tag";

const testQuery = gql`{
  primaryShop {
    _id
    name
  }
}`;

client
  .query({ query: testQuery })
  .then(result => console.log(result));

If it doesn't work in your storefront UI code, try it directly in the GraphQL Playground at http://localhost:3000/graphql. If it works there, then check over your Apollo Client setup code again and check for any errors.

Assuming your test query works, you're ready to start building your storefront UI. You will eventually need to configure authentication, but most of a storefront UI can be built without authenticating, so we'll do that later.

Next Task: Build a product listing page