Slide 1
Slide 1 text
©2018 Wantedly, Inc.
-PDBM4UBUF.BOBHFNFOU
XJUI"QPMMP
Roppongi.js #5
23th.Aug.2018 - Kodai Nakamura
Slide 2
Slide 2 text
©2018 Wantedly, Inc.
-PDBM4UBUF.BOBHFNFOU
XJUI"QPMMP
Roppongi.js #5
23th.Aug.2018 - Kodai Nakamura
Slide 3
Slide 3 text
©2018 Wantedly, Inc.
Kodai Nakamura
Github: @kdnk
Twitter: @kdnk__
Software Engineer at Wantedly, inc.
JavaScript, TypeScript, React, Rails, Ruby
Slide 4
Slide 4 text
©2018 Wantedly, Inc.
(SBQI2-Ͱͷ4UBUF.BOBHFNFOU
ʹ͍ͭͯ͠·͢
Slide 5
Slide 5 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
Slide 6
Slide 6 text
©2018 Wantedly, Inc.
"QPMMPͰ4UBUFΛͲ͏ͬͯѻ͏͔
‣ 3FEVYͱ͔.PC9ͱ͔Λ͏
‣ "QPMMPʹ$BDIFͷΈ͕͋Δ
‣ 6*ͷঢ়ଶ3FEVY
αʔό͔Βऔ͖ͬͯͨσʔλ"QPMMPͷ$BDIF
Slide 7
Slide 7 text
©2018 Wantedly, Inc.
‣ 4UBUF͕ͭʹͳΔ
z4JOHMFTPVSDFPGUSVUIz
‣ 4UBUFಉ࢜ͷ߹ΛऔΔͷ͕໘
‣ σʔλͷߋ৽ํ๏͕ҧ͏
BDUJPOΛEJTQBUDIͯ͠SFEVDFS͕TUBUFΛߋ৽
RVFSZNVUBUJPO
େมͦ͏ͳͱ͜Ζ
Slide 8
Slide 8 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
‣ (SBQI2-σʔλΛऔͬͯ͘ΔͨΊͷΫΤϦݴޠ
‣ ରαʔό͚ͩͰͳ͍
‣ -PDBMͷσʔλͷߋ৽Λී௨ͷRVFSZNVUBUJPOͷΑ͏ʹߦ͑Δ
‣ 3FEVYͰ͍͏TUPSF͕BQPMMPͷDBDIF
Slide 9
Slide 9 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { HttpLink } from 'apollo-link-http';
import { defaults, resolvers } from './resolvers/todos';
const cache = new InMemoryCache();
const stateLink = withClientState({
resolvers, cache, defaults
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});
Slide 10
Slide 10 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { HttpLink } from 'apollo-link-http';
import { defaults, resolvers } from './resolvers/todos';
const cache = new InMemoryCache();
const stateLink = withClientState({
resolvers, cache, defaults
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});
;ͭ͏ͷ"QPMMP
Slide 11
Slide 11 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { HttpLink } from 'apollo-link-http';
import { defaults, resolvers } from './resolvers/todos';
const cache = new InMemoryCache();
const stateLink = withClientState({
resolvers, cache, defaults
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});
;ͭ͏ͷ"QPMMP
Slide 12
Slide 12 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { HttpLink } from 'apollo-link-http';
import { defaults, resolvers } from './resolvers/todos';
const cache = new InMemoryCache();
const stateLink = withClientState({
resolvers, cache, defaults
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});
BQPMMPMJOLTUBUFΛ͏ͱ͖
Slide 13
Slide 13 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { HttpLink } from 'apollo-link-http';
import { defaults, resolvers } from './resolvers/todos';
const cache = new InMemoryCache();
const stateLink = withClientState({
resolvers, cache, defaults
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});
BQPMMPMJOLTUBUFΛ͏ͱ͖
Slide 14
Slide 14 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { HttpLink } from 'apollo-link-http';
import { defaults, resolvers } from './resolvers/todos';
const cache = new InMemoryCache();
const stateLink = withClientState({
resolvers, cache, defaults
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});
BQPMMPMJOLTUBUFΛ͏ͱ͖
Slide 15
Slide 15 text
©2018 Wantedly, Inc.
BQPMMPMJOLTUBUF
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { HttpLink } from 'apollo-link-http';
import { defaults, resolvers } from './resolvers/todos';
const cache = new InMemoryCache();
const stateLink = withClientState({
resolvers, cache, defaults
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});
BQPMMPMJOLTUBUFΛ͏ͱ͖
Slide 16
Slide 16 text
©2018 Wantedly, Inc.
!DMJFOU
BQPMMPMJOLTUBUF
‣ Ͳ͜ʹΫΤϦΛ͛Δ͔Λࣔ͢EJSFDUJWF
‣ ͜Ε͕͍͍ͭͯΔͱ
MPDBMͷDBDIFʹରͯ͠ΫΤϦΛ͛Δ
const SET_VISIBILITY = gql`
mutation SetFilter($filter: String!) {
visibilityFilter(filter: $filter) @client
}
`;
{mutate => {
return <>// ...>;
}}
Slide 17
Slide 17 text
©2018 Wantedly, Inc.
!DMJFOU
BQPMMPMJOLTUBUF
const SET_VISIBILITY = gql`
mutation SetFilter($filter: String!) {
visibilityFilter(filter: $filter) @client
}
`;
{mutate => {
return <>// ...>;
}}
‣ Ͳ͜ʹΫΤϦΛ͛Δ͔Λࣔ͢EJSFDUJWF
‣ ͜Ε͕͍͍ͭͯΔͱ
MPDBMͷDBDIFʹରͯ͠ΫΤϦΛ͛Δ
Slide 18
Slide 18 text
©2018 Wantedly, Inc.
!DMJFOU
BQPMMPMJOLTUBUF
const SET_VISIBILITY = gql`
mutation SetFilter($filter: String!) {
visibilityFilter(filter: $filter) @client
}
`;
{mutate => {
return <>// ...>;
}}
‣ Ͳ͜ʹΫΤϦΛ͛Δ͔Λࣔ͢EJSFDUJWF
‣ ͜Ε͕͍͍ͭͯΔͱ
MPDBMͷDBDIFʹରͯ͠ΫΤϦΛ͛Δ
Slide 19
Slide 19 text
©2018 Wantedly, Inc.
EFGBVMUT
BQPMMPMJOLTUBUF
‣ DBDIFͷॳظ
‣ SFEVYͩͱJOJUJBMTUBUF export const defaults = {
visibilityFilter: 'SHOW_ALL',
todos: [],
};
Slide 20
Slide 20 text
©2018 Wantedly, Inc.
SFTPMWFST
BQPMMPMJOLTUBUF
‣ "QPMMP4FSWFSͰɺ2VFSZ.VUBUJPOʹରԠ͢Δɺ
࣮ࡍʹσʔλΛऔಘ͢Δؔ
‣ BQPMMPMJOLTUBUFͰɺDBDIF͔ΒͷऔಘɾDBDIFʹର͢Δૢ࡞ͳͲ
ͷॲཧ͕هड़͞ΕΔͱ͜Ζ
Slide 21
Slide 21 text
©2018 Wantedly, Inc.
SFTPMWFST
export const resolvers = {
Mutation: {
visibilityFilter: (_, { filter }, { cache }) => {
cache.writeData({ data: { visibilityFilter: filter } });
return null;
},
addTodo: (_, { text }, { cache }) => {
const query = gql`
query GetTodos {
todos @client {
id
text
completed
}
}
`;
const previous = cache.readQuery({ query });
const newTodo = {
id: nextTodoId++,
text,
completed: false,
__typename: 'TodoItem',
};
const data = {
todos: previous.todos.concat([newTodo]),
};
cache.writeData({ data });
return newTodo;
},
}
}
Slide 22
Slide 22 text
©2018 Wantedly, Inc.
export const resolvers = {
Mutation: {
visibilityFilter: (_, { filter }, { cache }) => {
cache.writeData({ data: { visibilityFilter: filter } });
return null;
},
addTodo: (_, { text }, { cache }) => {
const query = gql`
query GetTodos {
todos @client {
id
text
completed
}
}
`;
const previous = cache.readQuery({ query });
const newTodo = {
id: nextTodoId++,
text,
completed: false,
__typename: 'TodoItem',
};
const data = {
todos: previous.todos.concat([newTodo]),
};
cache.writeData({ data });
return newTodo;
},
}
}
SFTPMWFST
Slide 23
Slide 23 text
©2018 Wantedly, Inc.
export const resolvers = {
Mutation: {
visibilityFilter: (_, { filter }, { cache }) => {
cache.writeData({ data: { visibilityFilter: filter } });
return null;
},
addTodo: (_, { text }, { cache }) => {
const query = gql`
query GetTodos {
todos @client {
id
text
completed
}
}
`;
const previous = cache.readQuery({ query });
const newTodo = {
id: nextTodoId++,
text,
completed: false,
__typename: 'TodoItem',
};
const data = {
todos: previous.todos.concat([newTodo]),
};
cache.writeData({ data });
return newTodo;
},
}
}
SFTPMWFST
Slide 24
Slide 24 text
©2018 Wantedly, Inc.
export const resolvers = {
Mutation: {
visibilityFilter: (_, { filter }, { cache }) => {
cache.writeData({ data: { visibilityFilter: filter } });
return null;
},
addTodo: (_, { text }, { cache }) => {
const query = gql`
query GetTodos {
todos @client {
id
text
completed
}
}
`;
const previous = cache.readQuery({ query });
const newTodo = {
id: nextTodoId++,
text,
completed: false,
__typename: 'TodoItem',
};
const data = {
todos: previous.todos.concat([newTodo]),
};
cache.writeData({ data });
return newTodo;
},
}
}
SFTPMWFST
Slide 25
Slide 25 text
©2018 Wantedly, Inc.
·ͱΊ
‣ (SBQI2-MPDBMʹͳΔσʔλʹରͯ͛͠ΕΔ
‣ "QPMMP͚ͩͰ4BUFཧͰ͖Δ
‣ SFEVYͷϘΠϥʔϓϨʔτΛॻ͔ͳ͍͍͔ͯ͘ΒεοΩϦ͢Δ