Documentation

Tutorials: Getting User Data

The Query & the Provider

The Query

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

query profile {
 profile {
   displayName
   imageUrl
   id
   bio
 }
}

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 > profile > userProfile.jsx

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

function withUserProfile(Component) {
 function WithUserProfile(props) {
   return (
     
       {({ loading, error, data }) => {
         const profile = data && data.profile;
         const { id, displayName, imageUrl, bio } = profile || {};
         return (
           
         );
       }}
     
   );
 }
 return WithUserProfile;
}

export { withUserProfile, profile };

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 (withUserProfile) 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.