How to use Apollo’s brand new Query components to manage local state

Andrico Karoulla
Jun 4, 2018 · 9 min read
Photo by Evan Dennis on Unsplash

Introduction

Getting set up

> yarn
> yarn dev
> yarn add apollo-client react-apollo graphql
src/apollo/index.js
src/index.js
> yarn add apollo-link apollo-cache-inmemory apollo-link-state
src/apollo/index.js
src/defaults/index.js
src/apollo/index.js

How to make a query

> yarn add graphql-tag
src/graphql/getPageName.js
props: {
currentPageName: ‘Apollo Demo’,
}
// and not thisprops: {
data: {
apolloClientDemo: {
currentPageName: ‘Apollo Demo’,
}
}
}
src/graphql/index.js
A refreshing image to break up the text. Jeff Sheldon

Mutations

src/graphql/updatePageName.js
src/graphql/index.js
src/apollo/resolvers/updatePageName.js
src/apollo/resolvers/index.js
src/apollo/index.js

Wrapping up


Thanks for reading!

You can check out my other articles below:

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Andrico Karoulla

Written by

Hey, I'm @andricokaroulla, Software Developer at @TrintHQ. I'm a Musician and Tech fan so chat geek with me on Twitter!

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead