Home›GraphQL in 5 Days›Day 5
Day 5 of 5
⏱ ~60 minutes
GraphQL in 5 Days — Day 5

Apollo Client

Connect a React app to your GraphQL API with Apollo Client, queries, mutations, and caching.

Setting Up Apollo Client

Terminal
npm install @apollo/client graphql
src/apolloClient.js
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({ uri: 'http://localhost:4000/graphql' });

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    }
  };
});

export const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});
Wrap App with ApolloProvider
import { ApolloProvider } from '@apollo/client';
import { client } from './apolloClient';

function App() {
  return (
    
      
    
  );
}
useQuery and useMutation
import { useQuery, useMutation, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users { id name email }
  }
`;

const CREATE_USER = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) { id name email }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);
  const [createUser] = useMutation(CREATE_USER, {
    refetchQueries: [GET_USERS],  // refetch after mutation
  });

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      {data.users.map(u => 
{u.name}
)}
      
    

  );
}
📝 Day 5 Exercise
Build a Full-Stack GraphQL App
  1. C
  2. o
  3. n
  4. n
  5. e
  6. c
  7. t
  9. a
  11. R
  12. e
  13. a
  14. c
  15. t
  17. a
  18. p
  19. p
  21. t
  22. o
  24. y
  25. o
  26. u
  27. r
  29. G
  30. r
  31. a
  32. p
  33. h
  34. Q
  35. L
  37. s
  38. e
  39. r
  40. v
  41. e
  42. r
  44. w
  45. i
  46. t
  47. h
  49. A
  50. p
  51. o
  52. l
  53. l
  54. o
  56. C
  57. l
  58. i
  59. e
  60. n
  61. t
  62. .
  64. D
  65. i
  66. s
  67. p
  68. l
  69. a
  70. y
  72. t
  73. h
  74. e
  76. u
  77. s
  78. e
  79. r
  80. s
  82. l
  83. i
  84. s
  85. t
  87. w
  88. i
  89. t
  90. h
  92. u
  93. s
  94. e
  95. Q
  96. u
  97. e
  98. r
  99. y
  100. .
  102. A
  103. d
  104. d
  106. a
  108. f
  109. o
  110. r
  111. m
  113. t
  114. h
  115. a
  116. t
  118. c
  119. r
  120. e
  121. a
  122. t
  123. e
  124. s
  126. a
  128. u
  129. s
  130. e
  131. r
  133. w
  134. i
  135. t
  136. h
  138. u
  139. s
  140. e
  141. M
  142. u
  143. t
  144. a
  145. t
  146. i
  147. o
  148. n
  150. a
  151. n
  152. d
  154. r
  155. e
  156. f
  157. e
  158. t
  159. c
  160. h
  161. e
  162. s
  164. t
  165. h
  166. e
  168. l
  169. i
  170. s
  171. t
  173. o
  174. n
  176. s
  177. u
  178. c
  179. c
  180. e
  181. s
  182. s
  183. .

Day 5 Summary

  • Apollo Client wraps your app in ApolloProvider and makes the client available everywhere.
  • useQuery(QUERY) returns { loading, error, data }. Handles fetching automatically.
  • useMutation(MUTATION) returns a function to call when ready, plus state.
  • refetchQueries in useMutation tells Apollo to re-run specific queries after the mutation completes.
→
← Previous
Day 4: Authentication and Context
Course Complete
Back to GraphQL in 5 Days
→
Finished this lesson?