Documentation

Tutorials: Showing all my Stations

The Query & the Provider

The Query

The query is added to the collectedStations.graphql file under src > graphql > queries

query collectedStations {
 collection (types: [ST]) {
   items {
       ... on Station {
         id
         name
         art {
           url (size: WIDTH_130)
         }
       }
     }
   }
 }

The Provider

A provider was created that serves 2 main functions:

• Export the query in order for components to use the query as is.
• Export a higher-order component that takes a Component and returns the Component wrapped in an Apollo Query component that sets the properties on the Component.

These exports can be found in this file: src > graphql > catalog > collectedStations.jsx

import React from 'react';
import { Query } from 'react-apollo';
import { loader } from 'graphql.macro';
const collectedStations = loader('../queries/collectedStations.graphql');

function withCollectedStations(Component) {
 function WithCollectedStations(props) {
   return (
     
       {({ loading, error, data }) => {
         const stations = (data && data.collection) && data.collection.items;
         return (
           
         );
       }}
     
   );
 }
 return WithCollectedStations;
}

export { withCollectedStations, collectedStations };

In the above code example you will see that the query is imported and loaded with the graphql.macro library. This library compiles GraphQL ASTs at build time using babel macros.

The provider (withCollectedStations) is then created. It takes a component as an argument and returns a new component that wraps the component passed in, in an Apollo Query component.

The provider and the query is then both exported.