From 2207a344874e22be938345041c2b8e94dd183484 Mon Sep 17 00:00:00 2001 From: Arthur Levoyer Date: Wed, 25 Apr 2018 09:41:52 +0200 Subject: [PATCH 1/3] first draft MO apollo cache query --- react-native/apollo/apollo-cache-query.s.md | 139 ++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 react-native/apollo/apollo-cache-query.s.md diff --git a/react-native/apollo/apollo-cache-query.s.md b/react-native/apollo/apollo-cache-query.s.md new file mode 100644 index 0000000..fabec2c --- /dev/null +++ b/react-native/apollo/apollo-cache-query.s.md @@ -0,0 +1,139 @@ +# [MO] Make an query into Apollo Cache _(~20 min)_ + +## Owner: Arthur Levoyer + +## Prerequisites _(~10 min)_ + +[] Have setup an Apollo cache in your apollo client configuration: + +```javascript +import {ApolloClient} from 'apollo-client' +import {InMemoryCache} from 'apollo-cache-inmemory' +import {ApolloLink} from 'apollo-link' +import {HttpLink} from 'apollo-link-http' + +const httpLink = new HttpLink({ + uri: YOUR_API_ENDPOINT', +}) + +const cache = new InMemoryCache() + +const client = new ApolloClient({ + link: httpLink, + cache, +}) + +export default client +``` + +[] Make sure you have read the following +[] Make sure the query you want to do in cache uses properties that were already requested through network (if you never asked for an author's book in the first place, there is no way you will be able to get it in the cache) + +## Steps _(~15 min)_ + +1. Making the first query through network + +Let's say you want to have all the books in your collections. + +You do the following query using graph-gql: + +```javascript +Query allMyBooks { + books { + id + name + author { + id + name + } + } +} +``` + +Apollo check if the data is already there in the cache. As this the first time you're doing this request, Apollo does the request through network. In case of success the following array is returned: + +```javascript +[ + { + id: 1, + name: 'The Jungle Book', + author: { + id: 3, + name: 'Disney', + __typename: 'Author' + }, + __typename: 'Book' + }, + { + id: 2, + name: 'Cinderella', + author: { + id: 3, + name: 'Disney', + __typename: 'Author' + }, + __typename: 'Book' + } +]; +``` + +Apollo is then registrering the following into cache: + +books(): [1, 2] +'Book:1': { +id: 1, +name: "The Jungle Book", +author: 'Author:3' +\_\_typename: 'Book' +} +'Book:2': { +id: 2, +name: "Cinderella", +author: 'Author:3' +\_\_typename: 'Book' +} +'Author:3': { +id: 3, +name: 'Disney', +\_\_typename: 'Author' +} + +In other word, it denormalizes the cache and will allow us in the future to quickly modify it. + +Next time this request is done, Apollo will return data from cache (no network query): by default, Apollo does a 'cache-first' query. +If you want to force Apollo to do query through network, use the 'newtork-first' option. + +2. Doing a query within Apollo cache + +In some case, you might want to request datas that are stored in your cache with a customize query not known by the Apollo Client. +In order to do so, you can use cacheResolvers. In your client.js file, add the following to your InMemoryCache: + +```javascript +import { toIdValue } from 'apollo-utilities'; + +const cache = new InMemoryCache({ + cacheResolvers: { + Query: { + book: (_, args) => + toIdValue( + cache.config.dataIdFromObject({ __typename: 'Book', id: args.id }) // return Book:xxxx-xxxx-xxxx-xxxx + ) // return {generated:false, id:"Book:xxxx-xxxx-xxxx-xxxx", type:"id", typename:undefined} + } + } +}); +``` + +In the resolver below, you are manipulating the type Book and creating a query that will return the book given an id. If you are used to Redux, it's very similar to selectors. + +Which means in your application you will be allow to use the following: + +```javascript +Query bookById($id) { +book (id: $id) { +id +name +} +} +``` + +Be careful though, as your API Apollo Client does not know this query, make sure to do pass 'cache-only' to your Query. From e10e318e7e7f9888d5e36cb44a5e0e3bd94b39d2 Mon Sep 17 00:00:00 2001 From: Arthur Levoyer Date: Wed, 25 Apr 2018 18:43:07 +0200 Subject: [PATCH 2/3] Change formatting --- ...he-query.s.md => apollo-cache-query.mo.md} | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) rename react-native/apollo/{apollo-cache-query.s.md => apollo-cache-query.mo.md} (78%) diff --git a/react-native/apollo/apollo-cache-query.s.md b/react-native/apollo/apollo-cache-query.mo.md similarity index 78% rename from react-native/apollo/apollo-cache-query.s.md rename to react-native/apollo/apollo-cache-query.mo.md index fabec2c..8d0e2a3 100644 --- a/react-native/apollo/apollo-cache-query.s.md +++ b/react-native/apollo/apollo-cache-query.mo.md @@ -4,36 +4,36 @@ ## Prerequisites _(~10 min)_ -[] Have setup an Apollo cache in your apollo client configuration: +* [] Have setup an Apollo cache in your apollo client configuration: ```javascript -import {ApolloClient} from 'apollo-client' -import {InMemoryCache} from 'apollo-cache-inmemory' -import {ApolloLink} from 'apollo-link' -import {HttpLink} from 'apollo-link-http' +import { ApolloClient } from 'apollo-client'; +import { InMemoryCache } from 'apollo-cache-inmemory'; +import { ApolloLink } from 'apollo-link'; +import { HttpLink } from 'apollo-link-http'; const httpLink = new HttpLink({ - uri: YOUR_API_ENDPOINT', -}) + uri: YOUR_API_ENDPOINT +}); -const cache = new InMemoryCache() +const cache = new InMemoryCache(); const client = new ApolloClient({ link: httpLink, - cache, -}) + cache +}); -export default client +export default client; ``` -[] Make sure you have read the following -[] Make sure the query you want to do in cache uses properties that were already requested through network (if you never asked for an author's book in the first place, there is no way you will be able to get it in the cache) +* [] Make sure you have read the following +* [] Make sure the query you want to do in cache uses properties that were already requested through network (if you never asked for an author's book in the first place, there is no way you will be able to get it in the cache) ## Steps _(~15 min)_ 1. Making the first query through network -Let's say you want to have all the books in your collections. +Let say you want to have all the books in your collections. You do the following query using graph-gql: @@ -103,7 +103,7 @@ In other word, it denormalizes the cache and will allow us in the future to quic Next time this request is done, Apollo will return data from cache (no network query): by default, Apollo does a 'cache-first' query. If you want to force Apollo to do query through network, use the 'newtork-first' option. -2. Doing a query within Apollo cache +3. Doing a query within Apollo cache In some case, you might want to request datas that are stored in your cache with a customize query not known by the Apollo Client. In order to do so, you can use cacheResolvers. In your client.js file, add the following to your InMemoryCache: From b42d1879559a6cd5218b0aa62da3b4c4964b0e52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Invit=C3=A9?= Date: Wed, 2 May 2018 09:10:21 +0200 Subject: [PATCH 3/3] First review by alexm --- react-native/apollo/apollo-cache-query.mo.md | 60 +++++++++++--------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/react-native/apollo/apollo-cache-query.mo.md b/react-native/apollo/apollo-cache-query.mo.md index 8d0e2a3..ea7524e 100644 --- a/react-native/apollo/apollo-cache-query.mo.md +++ b/react-native/apollo/apollo-cache-query.mo.md @@ -1,16 +1,20 @@ -# [MO] Make an query into Apollo Cache _(~20 min)_ +# [MO] Make an query into Apollo Cache _(~35 min)_ -## Owner: Arthur Levoyer +## Owner: Arthur Levoyer https://github.com/Arlevoy -## Prerequisites _(~10 min)_ +## When do I need this? -* [] Have setup an Apollo cache in your apollo client configuration: +You are using apollo with graph-ql and you want to do a query using data in your cache. (not provided by your Apollo client in the first place) + +## Prerequisites _(~20 min)_ + +* [ ] Have setup an Apollo cache in your apollo client configuration: ```javascript -import { ApolloClient } from 'apollo-client'; -import { InMemoryCache } from 'apollo-cache-inmemory'; -import { ApolloLink } from 'apollo-link'; -import { HttpLink } from 'apollo-link-http'; +import { ApolloClient } from "apollo-client"; +import { InMemoryCache } from "apollo-cache-inmemory"; +import { ApolloLink } from "apollo-link"; +import { HttpLink } from "apollo-link-http"; const httpLink = new HttpLink({ uri: YOUR_API_ENDPOINT @@ -26,14 +30,9 @@ const client = new ApolloClient({ export default client; ``` -* [] Make sure you have read the following -* [] Make sure the query you want to do in cache uses properties that were already requested through network (if you never asked for an author's book in the first place, there is no way you will be able to get it in the cache) - -## Steps _(~15 min)_ - -1. Making the first query through network +* [ ] Having made a first query through network -Let say you want to have all the books in your collections. +You want to have get all the books in your collections. You do the following query using graph-gql: @@ -50,29 +49,29 @@ Query allMyBooks { } ``` -Apollo check if the data is already there in the cache. As this the first time you're doing this request, Apollo does the request through network. In case of success the following array is returned: +Apollo checks if the data is already there in the cache. As this the first time you're doing this request, Apollo does the request through network. In case of success the following array is returned: ```javascript [ { id: 1, - name: 'The Jungle Book', + name: "The Jungle Book", author: { id: 3, - name: 'Disney', - __typename: 'Author' + name: "Disney", + __typename: "Author" }, - __typename: 'Book' + __typename: "Book" }, { id: 2, - name: 'Cinderella', + name: "Cinderella", author: { id: 3, - name: 'Disney', - __typename: 'Author' + name: "Disney", + __typename: "Author" }, - __typename: 'Book' + __typename: "Book" } ]; ``` @@ -103,20 +102,25 @@ In other word, it denormalizes the cache and will allow us in the future to quic Next time this request is done, Apollo will return data from cache (no network query): by default, Apollo does a 'cache-first' query. If you want to force Apollo to do query through network, use the 'newtork-first' option. -3. Doing a query within Apollo cache +* [] Make sure you have read the following +* [] Make sure the query you want to do in cache uses properties that were already requested through network (if you never asked for an author's book in the first place, there is no way you will be able to get it in the cache) + +## Steps _(~15 min)_ + +Doing a query within Apollo cache -In some case, you might want to request datas that are stored in your cache with a customize query not known by the Apollo Client. +You now want to request datas that are stored in your cache with a customize query not known by the Apollo Client, in this example you want to be able to require one book by its Id. In order to do so, you can use cacheResolvers. In your client.js file, add the following to your InMemoryCache: ```javascript -import { toIdValue } from 'apollo-utilities'; +import { toIdValue } from "apollo-utilities"; const cache = new InMemoryCache({ cacheResolvers: { Query: { book: (_, args) => toIdValue( - cache.config.dataIdFromObject({ __typename: 'Book', id: args.id }) // return Book:xxxx-xxxx-xxxx-xxxx + cache.config.dataIdFromObject({ __typename: "Book", id: args.id }) // return Book:xxxx-xxxx-xxxx-xxxx ) // return {generated:false, id:"Book:xxxx-xxxx-xxxx-xxxx", type:"id", typename:undefined} } }