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 {

The Provider

A provider was created that serves 2 main functions:

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.