GraphQL with Apollo

GraphQL with Apollo
Radoslav Stankov 30/09/2017

View Slide

Radoslav Stankov
@rstankov

http://rstankov.com

http://github.com/rstankov

View Slide

View Slide

html
html
json

View Slide

json
json

View Slide

View Slide

 
http://graphql.org/ 

View Slide

View Slide

 
topic {
id
name
description
isFollowed
image
}

View Slide

 
query {
topic(id: 1) {
id
name
description
isFollowed
image
}
}

View Slide

 
query {
topic(id: 1) {
id
name
description
isFollowed
image
}
}
POST /graphql

View Slide

 
query {
topic(id: 1) {
id
name
description
isFollowed
image
}
}
{
"data": {
"topic": {
"id": 1,
"name": "Developer Tools",
"description": "Writing cod
"isFollowed": true,
"image": "assets.producthun
}
}
}
POST /graphql

View Slide

 
query {
topic(id: 1) {
id
name
description
isFollowed
image
}
}

View Slide

 
query {
topic(id: 1) {
id
name
description
isFollowed
image
}
}

{topic.name} 
{topic.description} 

View Slide

query {
topic(id: 1) {
id
...TopicItem
}
}
fragment TopicItem on Topic {
id
name
description
...TopicFollowButton
...TopicImage
}
fragment TopicFollowButton on Topic {
id
name
isFollowed
}
fragment TopicImage on Topic {
image
}

{topic.name} 

View Slide

query {
topic(id: 1) {
id
...TopicItem
}
}
id
name
description
...TopicImage
}
id
name
isFollowed
}
image
}
POST /graphql

View Slide

query {
topic(id: 1) {
id
...TopicItem
}
}
id
name
description
...TopicImage
}
id
name
isFollowed
}
image
}
{
"data": {
"topic": {
"id": 1,
"description": "Writing cod
"isFollowed": true,
"image": "assets.producthun
}
}
}
POST /graphql

View Slide

 
query {
topic(id: 1) {
id
...TopicItem 
}
}

View Slide

View Slide

 
query {
allTopics {
id
...TopicItem 
}
}

View Slide

POST /graphql
 
query {
allTopics {
id
...TopicItem 
}
}

View Slide

{
"data": {
"allTopics": [{
"id": 1,
"description": "Writing code is har
"isFollowed": true,
"image": "assets.producthunt.com/uu
}, { 
"id": 2,
"name": "Books",
"description": "There’s just nothin
"isFollowed": false,
}, { 
"id": 3,
"name": "iPhone",
"description": "The beloved "phone"
"isFollowed": true,
}]
}
}
POST /graphql
 
query {
allTopics {
id
...TopicItem 
}
}

View Slide

 
http://www.apollodata.com/ 

View Slide

/components/TopicFollowButton/Fragment.graphql
/components/TopicFollowButton/index.js
/components/TopicFollowButton/styles.css 
/components/TopicImage/Fragment.graphql
/components/TopicImage/index.js
/components/TopicImage/styles.css 
/components/TopicItem/Fragment.graphql
/components/TopicItem/index.js
/components/TopicItem/styles.css
/pages/Topics/Query.graphql
/pages/Topics/index.js 
/pages/Topics/styles.css

View Slide

image
}

View Slide

id 
name 
isFollowed
}

View Slide

#import "ph/components/TopicFollowButton/Fragment.graphql"
#import "ph/components/TopicImage/Fragment.graphql"
id
name 
slug
description
...TopicImage
}

View Slide

/components/TopicFollowButton/index.js
/components/TopicFollowButton/styles.css 
/components/TopicImage/index.js
/components/TopicImage/styles.css 
/components/TopicItem/index.js
/components/TopicItem/styles.css
/pages/Topics/index.js 
/pages/Topics/styles.css

View Slide

#import "ph/components/TopicItem/Fragment.graphql" 
query TopicsPage {
allTopics {
id 
...TopicItem 
}
}

View Slide

TopicPage TopicItem
TopicImage
TopicFollowButton

View Slide

import TopicItem from 'components/TopicItem'; 
import QUERY from './Query.graphql';
import { graphql } from 'react-apollo';
export default function Content(props) {
/* ... */
}
export default graphql(QUERY)(Content);
/pages/Topics/index.js

View Slide

import TopicItem from 'components/TopicItem';
export function Content({ data: { allTopics, loading } }) {
if (loading) {
return Loading...;
}
return (

Topics

{allTopics.map(topic => )}

);
}
export default graphql(QUERY)(Content);

View Slide

import withLoading from 'decorators/withLoading';
export function Content({ data: { allTopics } }) {
return (

Topics


);
}
export default graphql(QUERY)(withLoading(Content));

View Slide

import { compose, graphql } from 'react-apollo';
return (

Topics


);
}
export default compose(
graphql(QUERY),
withLoading
)(Content);

View Slide

View Slide

https://facebook.github.io/relay/

View Slide

! Node interface
" Connections
# Mutations
GraphQL Relay Speciﬁcation
https://facebook.github.io/relay/docs/graphql-relay-speciﬁcation.html

View Slide

 
query {
allTopics {
id
}
}
{
"data": {
"allTopics": [{
"id": 1
}]
}
}
https://facebook.github.io/relay/docs/graphql-object-identiﬁcation.html
Node Interface

View Slide

 
query {
allTopics {
id
}
}
{
"data": {
"allTopics": [{
"id": base64("Topic:1")
}]
}
}
Node Interface

View Slide

 
query {
allTopics {
id
}
}
{
"data": {
"allTopics": [{
"id": "VG9waWM6MQ=="
}]
}
}
Node Interface

View Slide

 
query {
node(id: "VG9waWM6MQ==") {
id
}
}
{
"data": {
"node": {
"id": "VG9waWM6MQ=="
}
}
}
Node Interface

View Slide

 
query {
id 
... on Topic { 
name 
}
}
}
{
"data": {
"node": {
"id": "VG9waWM6MQ==", 
"name": "Games"
}
}
}
Node Interface

View Slide

 
query {
id 
... on Topic { 
name 
} 
... on User { 
fullName 
}
}
}
{
"data": {
"node": {
"id": "VG9waWM6MQ==", 
"name": "Games"
}
}
}
Node Interface

View Slide

query TopicsPage {
allTopics { 
id 
...TopicItem 
}
}
https://facebook.github.io/relay/docs/graphql-connections.html
Connections

View Slide

query TopicsPage($cursor: String) {
allTopics(first: 10, after: $cursor) { 
edges { 
node { 
id 
...TopicItem 
} 
} 
pageInfo { 
hasNextPage 
}
}
}
Connections

View Slide

allTopics(last: 10, before: $cursor) { 
edges { 
node { 
id 
...TopicItem 
} 
} 
pageInfo { 
hasPreviousPage 
}
}
}
Connections

View Slide

[connectionName](first:, after:) { 
edges { 
cursor 
node { 
[item] 
} 
} 
pageInfo { 
endCursor
startCursor 
hasPreviousPage 
hasNextPage
}
}
Connections

View Slide

View Slide

query TopicsPage {
allTopics {
id 
...TopicItem 
}
}

View Slide

query TopicsPage {
allTopics(first: 10) { 
edges { 
node { 
id 
...TopicItem 
} 
} 
pageInfo { 
hasNextPage 
}
}
}

View Slide

return (

Topics


);
}
graphql(QUERY),
withLoading
)(Content);

View Slide

export function Content({ data }) {
const allTopics = data.allTopics.edges.map(({ node }) => node);
return (

Topics


);
}
graphql(QUERY),
withLoading
)(Content);

View Slide

export function extractEdgeNodes(data) {
return data.edges.map(({ node }) => node);
}
/utils/graphql.js

View Slide

export function extractEdgeNodes(data) {
if (!data || !data.edges) {
return [];
}
return data.edges.map(({ node }) => node);
}
/utils/graphql.js

View Slide

import { extractEdgeNodes } from 'utils/graphql';
const allTopics = extractEdgeNodes(data.allTopics);
return (

Topics


);
}
graphql(QUERY),
withLoading
)(Content);

View Slide

return (

Topics

{extractEdgeNodes(data.allTopics).map(topic => ( 

))}

);
}
graphql(QUERY),
withLoading
)(Content);

View Slide

query TopicsPage {
allTopics(first: 10) { 
edges { 
node { 
id 
...TopicItem 
} 
} 
pageInfo { 
hasNextPage 
}
}
}

View Slide

allTopics(first: 10, after: $cursor) { 
edges { 
node { 
id 
...TopicItem 
} 
} 
pageInfo { 
endCursor 
hasNextPage 
}
}
}

View Slide

return (

Topics

{extractEdgeNodes(data.allTopics).map(topic => ( 

))}

);
}
graphql(QUERY),
withLoading
)(Content);

View Slide

export function Content({ data, loadMore }) {
const hasNextPage = data.allTopics.pageInfo.hasNextPage;
return (

Topics

{extractEdgeNodes(data.allTopics).map(topic => (
,
))}

);
}
graphql(QUERY, {
props: ({ data }) => ({
loadMore: () => {
return data.fetchMore({
variables: {

View Slide

))}

);
}
graphql(QUERY, {
props: ({ data }) => ({
loadMore: () => {
variables: {
cursor: data.allTopics.pageInfo.endCursor,
},
updateQuery(previousResult, { fetchMoreResult }) {
const connection = fetchMoreResult.allTopics;
return {
allTopics: {
edges: [...previousResult.allTopics.edges, ...connection.edges]
pageInfo: connection.pageInfo,
},
};
},
});
},
}),
}),
withLoading,
)(Content);

View Slide

))}

);
}
graphql(QUERY, {
props: ({ data }) => ({
loadMore: () => {
variables: {
},
return {
allTopics: {
edges: [...previousResult.allTopics.edges, ...connection.edges]
},
};
},
});
},
}),
}),
withLoading,
)(Content);
$

View Slide

View Slide

graphql(QUERY, {
props: ({ data }) => ({
loadMore: () => {
variables: {
},
return {
allTopics: {
edges: [...previousResult.allTopics.edges, ...connection.edges],
},
};
},
});
},
}),
});

View Slide

graphql(QUERY, {
props: ({ data }) => ({
loadMore: () => {
variables: {
cursor: data[path].pageInfo.endCursor,
},
const connection = fetchMoreResult[path];
return {
[path]: {
edges: [...previousResult[path].edges, ...connection.edges],
},
};
},
});
},
}),
});

View Slide

graphql(QUERY, {
props: ({ data }) => ({
loadMore: () => {
const path = 'allTopics';
variables: {
},
return {
[path]: {
},
};
},
});
},
}),
});

View Slide

function loadMore(data, path) {
variables: {
},
return {
[path]: {
},
};
},
});
}
graphql(QUERY, {
props: ({ data }) => ({
loadMore: () => loadMore(data, 'allTopics'),
}),
});

View Slide

import { extractEdgeNodes, loadMore } from 'utils/graphql';
return (

Topics
{extractEdgeNodes(data.allTopics).map(topic =>
,
)}

);
}
graphql(QUERY, {
props: ({ data }) => ({
}),
}),
withLoading,
)(Content);

View Slide

return (

Topics
,
)}

);
}
graphql(QUERY, {
props: ({ data }) => ({
}),
}),
withLoading,
)(Content);
%

View Slide

return (

Topics
,
)}

);
}
graphql(QUERY, {
props: ({ data }) => ({
}),
}),
withLoading,
)(Content);

View Slide

return (

Topics
,
)}

);
}
graphql(QUERY, {
props: ({ data }) => ({
}),
}),
withLoading,
)(Content);
&

View Slide

return (

Topics

,
)}

);
}
graphql(QUERY),
withLoading,
)(Content);

View Slide

return (

Topics

,
)}

);
}
graphql(QUERY),
withLoading,
)(Content);
'

View Slide

View Slide

Mutations

View Slide

! Node interface
" Connections
# Mutations
GraphQL Relay Speciﬁcation
https://facebook.github.io/relay/docs/graphql-relay-speciﬁcation.html

View Slide

View Slide

 
mutation FollowTopic($id: ID!) {
followTopic(id: $id) { 
id
isFollowed
}
}
{
"data": { 
"followTopic": {
"id": "VG9waWM6MQ==",
"isFollowed": true
}
}
}
POST /graphql

View Slide

 
mutation UnfollowTopic($id: ID!) {
unfollowTopic(id: $id) { 
id
isFollowed
}
}
{
"data": { 
"unfollowTopic": {
"isFollowed": false
}
}
}
POST /graphql

View Slide

 
mutation FollowTopic($id: ID!) {
followTopic(id: $id) { 
id
isFollowed
}
}
{
"data": { 
"followTopic": {
"isFollowed": true
}
}
}
POST /graphql

View Slide

 
mutation FollowTopic($id: ID!, $a: Int, $b: Int, $c: Int, $d: Int) {
followTopic(id: $id, a: $a, b: $b, c: $c, d: $d) { 
id
isFollowed
}
}
POST /graphql

View Slide

 
mutation FollowTopic($input: FollowInput!) {
followTopic(input: $input) { 
clientMutationId
topic { 
id
isFollowed 
}
}
}
https://facebook.github.io/relay/docs/graphql-mutations.html
POST /graphql

View Slide

 
clientMutationId
topic { 
id
isFollowed 
}
}
}
{
"data": { 
"followTopic": {
"clientMutationId": "0",
"topic": { 
"isFollowed": true
}
}
}
}
POST /graphql

View Slide

View Slide

{topic.name} 

View Slide

mutation FollowTopic($input: FollowTopicInput!) {
followTopic(input: $input) {
topic {
id
isFollowed
}
}
}
/components/FollowButton/FollowTopic.graphql

View Slide

mutation UnfollowTopic($input: UnfollowTopicInput!) {
unfollowTopic(input: $input) {
topic {
id
isFollowed
}
}
}
/components/FollowButton/UnfollowTopic.graphql

View Slide

import CREATE_MUTATION from './FollowTopic.graphql'; 
import REMOVE_MUTATION from './UnfollowTopic.graphql'; 
 
export function FollowButton({ /* ... */ }) { /* ... */ }
 
graphql(CREATE_MUTATION, {
props: ({ ownProps: { topic: { id } }, mutate }) => ({
followTopic() {
return mutate({
variables: {
input: { id },
},
});
},
}),
}),
graphql(REMOVE_MUTATION, { /* ... */ }),
)(FollowButton)
/components/FollowButton/index.js

View Slide

 
export function FollowButton({ /* ... */ }) { /* ... */ }
 
graphql(CREATE_MUTATION, {
props: ({ ownProps: { topic: { id } }, mutate }) => ({
followTopic() {
return mutate({
variables: {
input: { id },
},
optimisticResponse: {
response: {
node: {
__typename: 'Topic',
id,
isFollowed: true
},
},
}
});
},
}),
}),
)(FollowButton)

View Slide

 
export function FollowButton({ topic, followTopic, unfollowTopic }) {
if (topic.isFollowed) {
return (

Following

);
}
return (

Follow

);
}
 
graphql(CREATE_MUTATION, { /* ... */ }),
)(FollowButton)

View Slide

import { Component } from 'ph/components/TopicFollowButton';
describe(Component.name, () => {
const followed = buildTopic({ isFollowed: true });
const unfollowed = buildTopic({ isFollowed: false });
it('renders "Follow" text when is not following', () => {
expect(shallow()).to.contain('Follow');
});
it('renders "Following" text when is following', () => {
expect(shallow()).to.contain('Following');
});
it('can follow a topic', () => {
const spy = sinon.spy();
const wrapper = shallow();
wrapper.simulate('click', { preventDefault() {} });
expect(spy).to.have.been.calledOnce;
});
it('can unfollow a topic', () => {
const spy = sinon.spy();
const wrapper = shallow();
wrapper.simulate('click', { preventDefault() {} });
expect(spy).to.have.been.calledOnce;
});
});
/components/FollowButton/index.test.js

View Slide

 
clientMutationId
topic { 
id
isFollowed 
}
}
}
{
"data": { 
"followTopic": {
"topic": { 
"isFollowed": true
}
}
}
}
POST /graphql

View Slide

 
clientMutationId
node { 
id
isFollowed 
}
}
}
{
"data": { 
"followTopic": { 
"node": {
"isFollowed": true
}
}
}
}
POST /graphql

View Slide

Forms

View Slide

View Slide

#import "./Fragment.graphql" 
 
mutation UpdateSetting($input: SettingInput!) {
updateSettings(input: $input) {
node { 
...SettingsForm 
}
}
}
/pages/Settings/Mutation.graphql

View Slide

function SettingsPage({ data: { settings }, submit, onSubmit }) {
return (

);
}
graphql(QUERY)
graphql(MUTATION, {
props: ({ ownProps, mutate }) => ({
submit(input) {
return mutate({
variables: { input },
});
},
onSubmit(node) {
// handle successful update
},
}),
/pages/Settings/index.js

View Slide

View Slide

 
mutation UpdateSetting($input: SettingInput!) {
node { 
...SettingsForm 
}
}
}
{
"data": { 
"updateSettings": {
"node": { 
"...": "...",
}
}
}
}
POST /graphql

View Slide

 
mutation FollowTopic($input: FollowTopicInput!) {
node { 
id
isFollowed 
} 
errors {
field
messages
}
}
}
POST /graphql
{
"data": { 
"updateSettings": {
"node": { 
"...": "...",
} 
"errors": [{ 
"name": ["missing"],
"email": ["invalid"],
}]
}
}
}

View Slide

GraphQL 
Apollo 
Relay Speciﬁcation 
( Node 
) Connections 
* Mutations 
+ Data Fetching 
, Pagination 
- Mutations 
. Forms
Recap

View Slide

View Slide

Thanks /

View Slide

GraphQL with Apollo

GraphQL with Apollo

Radoslav Stankov

More Decks by Radoslav Stankov

Other Decks in Technology

Featured

Transcript