Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Data feching and caching on Apollo Client
joe_re
September 15, 2017
Technology
2
2.2k
Data feching and caching on Apollo Client
2017/09/15 ToKyoto.js LT
joe_re
September 15, 2017
Tweet
Share
More Decks by joe_re
See All by joe_re
Prisma2 with Graphql
joere
3
760
Go beyound static on Netlify
joere
1
160
Building Real-time Vue App
joere
4
3.9k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
200
Mock Native API in your E2E test
joere
2
870
Typed Vuex Data Flow
joere
0
440
AsyncStorageをNodeのREPLから操作するためにTop-levelでawaitしたい人生だった
joere
0
400
Our choice in ReactNative
joere
8
8.3k
Effective E2E Test In An Electron Application
joere
1
700
Other Decks in Technology
See All in Technology
Deeplearning from almost scratch
hn410
0
580
THETA Xの登場はジオ業界を変えるか?
furuhashilab
0
160
プロダクトグロースと技術のベースアップを両立させるRettyのアプリ開発スタイル / Achieve Product Growth and Tech Update
imaizume
1
290
AWSの基礎を学ぼうで学んだ9種類のDBを勝手にふりかえる
98lerr
2
720
様々な現場のPower Platform ~小さなエンジニアの奮闘記~
hyodol2513
0
1.9k
toilを解消した話
asumaywy
0
140
Babylon.js v5 新機能の紹介
limes2018
1
1.1k
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
3.5k
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
⚡Lightdashを試してみた
k_data_analyst
0
190
Devに力を授けたいSREのあゆみ / SRE that wants to empower developers
tocyuki
3
470
tfcon-2022-cpp
cpp
5
5k
Featured
See All Featured
Bash Introduction
62gerente
596
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Web development in the modern age
philhawksworth
197
9.3k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
YesSQL, Process and Tooling at Scale
rocio
157
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
The Invisible Customer
myddelton
110
11k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
Designing for humans not robots
tammielis
241
23k
Transcript
Data feching and caching on Apollo Client 2017/09/15 ToKyoto.js LT
@joe_re
Who am I? twitter: @joe_re github: @joere working in freee.K.K
GraphQL Tokyo Organizer
What is Apollo Client? GraphQL のClient ライブラリ React 、Angular 、Vue
、NativeApp(ReactNative, iOS, Android) などなど幅広くサポート 対抗馬はFacebook 製のRelay
vs Relay
の話はしないけどざっくりApollo が優位なところをざっくり サポートはReact, ReactNative のみ GraphQL API に制約をかける 規約が多いので理解するまで大変 (
ただし慣れればパフォーマンスやDE は向上する)
Fundations of GraphQL
What is GraphQL Facebook が公開しているAPI の仕様 データの取得、更新を行うクエリ言語を提供する 特定の言語やフレームワークを指すものではない
Example Query query { repository(owner: "apollographql", name: "apollo-client") { name,
description, stargazers { totalCount } } } Result { "data": { "repository": { "name": "apollo-client", "description": ":rocket: A fully-featured, production ready caching GraphQL client for every server or UI framework", "stargazers": { "totalCount": 3948 } } } }
Good Points クライアント側で必要なデータを細かく取捨選択できるの で無駄がない 複数のリソースを1 つのリクエストで一度に得られる クライアントが理解できるスキーマを元にクエリするの で、期待した結果を得られる( 型定義も容易) (http://graphql.org/)
Three types of GraphQL operation Query: データの取得 Mutation: Query で取得したデータの更新
Subscription: データの変更の購読(Response Stream)
Example of Query query SearchRepository($queryString: String!, $cursor: String) { search(query:
$queryString, type: REPOSITORY, first: 30, after: $cursor) { repositoryCount edges { cursor node { ... RepositorySearchResult } } } } fragment RepositorySearchResult on Repository { databaseId name owner { avatarUrl(size: 40) login } description stargazers { totalCount } forks { totalCount } updatedAt }
Example of Mutation mutation AddStar($input: AddStarInput!) { addStar(input: $input) {
starrable { viewerHasStarred } } }
Example of Subscription subscription sub { newMessage { ... newMessageFields
} } fragment newMessageFields on Message { body sender }
※ ここからようやくApollo Client の話
DEMO (GitHub Client)
実装例にはReact を使います
Creating a client and inject via a provider const networkInterface
= createNetworkInterface({ uri: 'https://api.github.com/graphql' }); const middleWareInterface: MiddlewareInterface[] = [{ applyMiddleware(req, next) { const headers = req.options.headers || {}; AsyncStorage.getItem('token').then((token) => { headers.authorization = token ? `Bearer ${token}` : ''; req.options.headers = headers; next(); }); } }]; networkInterface.use(middleWareInterface); const client = new ApolloClient({ networkInterface }); export default class App extends React.Component { render() { return ( <ApolloProvider client={client}> <Routes /> </ApolloProvider> ) } }
Creating a client and inject via a provider 作成したclient はprovider
を通じて各コンポーネントで 利用可能となる graphql() を用いてGraohQL Container を作成することが できる GraphQL Container は与えるprops の変化によるfetch を 自動で行う client を直接呼び出して使用することも可能( withApollo())
Creating a GraphQL Container function ReleasesPage(props: Props & AppoloProps) {
if (props.loading) { return <Text>Loading</Text>; } return ( <View style={styles.page}> <ReleaseList repository={props.repository} navigation={props.navigation}/> </View> ); } const withData: OperationComponent<ShowReleasesQuery & QueryProps, Props, Props & AppoloProps> = graphql(RELEASES_QUERY, ({ options: ({ owner, name }) => ( { variables: { owner, name }, notifyOnNetworkStatusChange: true } ), props: (props) => { const { loading, repository } = props.data; return { loading, repository, } } })); export default withData(ReleasesPage);
GraphQL では大抵のリソースが 1 つのリクエストで取れる
件数が膨大なデータに対しても 1 つのリクエストで取得できる??
そんなわけはない
件数が多ければ当然 その分レスポンスは遅くなる
つまりページネーション が必要
data.fetchMore ページネーションを実現するためのAPI 現在のfetching の状態をcache に残したまま、新しく取得し た結果をマージすることができる Relay.QL のcursor のパターンだけではなく、どのページネ ーションのパターンにでも使える
Example of Pagination const withData: OperationComponent<SearchRepositoryQuery & QueryProps, Props, Props
& AppoloProps> = graphql(REPOSITORY_QUERY, ({ options: ({ queryString }) => ( { variables: { queryString }, notifyOnNetworkStatusChange: true } ), props: (props) => { const { loading, search, fetchMore } = props.data; return { loading, searchResult: { search }, loadNextPage: (cursor) => { return fetchMore({ variables: { cursor }, updateQuery: (prev, data) => { const { search } = data.fetchMoreResult; search.edges = prev.search.edges.concat(search.edges); return { search }; } }) } } } }));
Updating fetched data データの更新には前述の通りMutation を使う Mutation もQuery と同じように graphql() を用いて使用可能
になる Mutaion の場合はQuery とは違い、props の変化に応じて実行 されない
Example of Mutaion function StarBadge(props: Props) { return ( <Badge
containerStyle={{ width: 160, height: 30, backgroundColor: '#fff', marginRight: 8 }} onPress={() => rops.repository.viewerHasStarred ? props.removeStar(repository.id) : props.addStar(repository.id)}> <Text>{//... 省略}</Text> </Badge> ); } const StarBadgeWithMutations = compose( graphql(ADD_STAR_MUTATION, { props: ({ ownProps, mutate }) => ({ addStar: (id: string) => mutate({ variables: { input: { starrableId: id } }, }) }) }), graphql(REMOVE_STAR_MUTATION, { props: ({ ownProps, mutate }) => ({ removeStar: (id: string) => mutate({ variables: { input: { starrableId: id } }, }) }) }) )(StarBadge);
Automatic store updates 例ではMutation の発行のロジックしか書いていないにも関わ らず、store のデータも更新される mutation の結果で返ってきているid と同一のものがstore
にあ る場合には、store も同時に更新される mutation RemoveStar($input: RemoveStarInput!) { removeStar(input: $input) { starrable { id stargazers { totalCount } viewerHasStarred } } }
if you can't use automatic store updates... mutation のオプションを通じて手動でstore をupdate
するこ とが可能 refetchQueries: mutation の後に再度query を発行しデータを 更新する update: mutation の後にstore のcache を直接いじってデータ を更新する updateQueries: deprecated
あえてupdate を使ってcache を更新してみた const StarBadgeWithMutations = compose( graphql(ADD_STAR_MUTATION, { props:
({ ownProps, mutate }) => ({ addStar: (id: string) => mutate({ variables: { input: { starrableId: id } }, }) }) }), graphql(REMOVE_STAR_MUTATION, { props: ({ ownProps, mutate }) => { return { removeStar(id: string) { mutate({ variables: { input: { starrableId: id } }, update: (store, { data }) => { const queryOption = { query: RELEASES_QUERY, variables: { owner: ownProps.repository.owner.login, name: ownProps.repository.name } }; const cache = store.readQuery(queryOption); cache.repository.viewerHasStarred = data.removeStar.starrable.viewerHasStarred; cache.repository.stargazers.totalCount -= 1; store.writeQuery(Object.assign({}, queryOption, { data: cache })); } }) } } } }) )(StarBadge);
大変なのでなるべく Automatic store updates しましょう!
https://www.meetup.com/jaJP/GraphQLTokyo/ (多分)来月meetup するので、ご興味があればぜひ!
Thank you for your attention!