GraphQL in production

2018/03/03 YAPC::Okinawa 2018 ONNASON

Transcript

1. GraphQL Λ ϓϩμΫγϣϯಋೖͨ݁͠Ռ YAPC::Okinawa 2018 ONNASON 1
2. ࣗݾ঺հ — ਔଟݟ ྒྷʢʹͨΈ Γΐ͏ʣ @bird_tummy — Android, iOS application developer @ CyberAgent, Inc. — ❤ SHISHAMO ! ! ! YAPC::Okinawa 2018 ONNASON 2
3. ࣗݾ঺հ — Perl શ͘ॻ͍ͨ͜ͱ͋Γ·ͤΜʂʂʂʂʂ — ͔ͤͬ͘ YAPC ʹདྷͨͷͰษڧͯ͠ؼΖ͏ͱࢥ͍· ͢ʂʂʂʂ YAPC::Okinawa 2018 ONNASON 3
4. ࠓ೔࿩͢͜ͱ — ࡢ೥͔ΒΑ͘ݟ͔͚ΔΑ͏ʹͳͬͨ GraphQL — GitHub API v4 Ͱ࠾༻͞Εͨͷ͕͖͔͚ͬͷ 1 ͭ — ͳ͔ͳ͔࣮૷पΓͷ஌ݟ͕޿·͍ͬͯͳ͍Α͏ʹࢥ͏ ʢࢼͨ͠ܥهࣄ͸͋Δ͚Ͳɻɻʣ YAPC::Okinawa 2018 ONNASON 4
5. ࠓ೔࿩͢͜ͱ — ಋೖฤɺ࣮૷ฤɺӡ༻ฤͷ 3 ͭͷϑΣʔζʹ෼͚ͯͲͷΑ ͏ʹ࣮૷͍ͯ͠Δ͔Λ͓࿩͠·͢ — ΫϥΠΞϯτ੒෼ଟΊͰ͢ — ࠓޙ࣮ࡍʹಋೖ͠Α͏ͱ͍ͯ͠Δํɺݕ౼͍ͯ͠Δํͷࢀ ߟʹͳΕ͹޾͍Ͱ͢ YAPC::Okinawa 2018 ONNASON 5
6. ࠓ೔࿩͞ͳ͍͜ͱ — GraphQL ͱ REST ౳ͱͷൺֱ — GraphQL ʹ͍ͭͯͷࡉ͔͍ղઆ YAPC::Okinawa 2018 ONNASON 6
7. ΞδΣϯμ — ͦ΋ͦ΋ GraphQL ͱ͸ʁ — ಋೖฤ — GraphQL ͷ։ൃ؀ڥ — ࣮૷ฤ — GraphQL ͷαʔό / ΫϥΠΞϯτͦΕͧΕͷ࣮૷ํ๏ — ӡ༻ฤ — Ωϟογϡ౳ͷύϑΥʔϚϯε໘ʹ͍ͭͯ — ςετͷॻ͖ํ — ·ͱΊ YAPC::Okinawa 2018 ONNASON 7
8. GraphQL ͱ͸ʁ YAPC::Okinawa 2018 ONNASON 8
9. GraphQL ͱ͸ʁ — http://graphql.org — Facebook ੡ — API ༻ͷΫΤϦݴޠͰ͋Γɺطଘ ͷσʔλͰΫΤϦΛ࣮ߦ͢ΔͨΊ ͷϥϯλΠϜ YAPC::Okinawa 2018 ONNASON 9
10. YAPC::Okinawa 2018 ONNASON 10
11. GraphQL ͱ͸ʁ — Mutation ͱ Query ͕͋Δ — Mutation: REST API Ͱ͍͏ POST, PUT, DELETE — Query: REST API Ͱ͍͏ GET — Fragment Ͱಉ͡ఆٛΛ࢖͍·ΘͤΔ YAPC::Okinawa 2018 ONNASON 11
12. YAPC::Okinawa 2018 ONNASON 12
13. YAPC::Okinawa 2018 ONNASON 13
14. YAPC::Okinawa 2018 ONNASON 14
15. ಋೖฤ YAPC::Okinawa 2018 ONNASON 15
16. ಋೖฤ — ·ͣखݩͰࢼͤΔ؀ڥΛ༻ҙ͢Δ — GraphiQL (GraphiQL Feen!) — υΩϡϝϯτੜ੒ — graphdoc YAPC::Okinawa 2018 ONNASON 16
17. GraphiQL (GraphiQL Feen!) — https://github.com/graphql/graphiql — ϒϥ΢βͰಈ͘ — https://github.com/skevy/graphiql-app — Electron ੡ — https://github.com/bpatters/graphiql-feen — Chrome Extension YAPC::Okinawa 2018 ONNASON 17
18. YAPC::Okinawa 2018 ONNASON 18
19. YAPC::Okinawa 2018 ONNASON 19
20. ಋೖฤ — υΩϡϝϯτͱ࢓༷Λݟͳ͕Βɺ֤ Mutation ΍ Query Ͱ ΄͍͠΋ͷ͚ͩఆٛ͢Δ — .graphql, .gql — ఆٛ͢Δͱ͖ʹิ׬͕͖͍ͨঢ়ଶͰ΍Γ͍ͨ — ֤ΤσΟλͷϓϥάΠϯ͕࡞ΒΕ͍ͯΔ YAPC::Okinawa 2018 ONNASON 20
21. ಋೖฤ — vscode-graphql — js-graphql-intellij-plugin YAPC::Okinawa 2018 ONNASON 21
22. ಋೖฤ — intellij ͷํΛ͕ͬͭΓ࢖ͬͯΔͷͰͦͪΒΛྫʹݟͯΈΔ YAPC::Okinawa 2018 ONNASON 22
23. ಋೖฤ — js-graphql-intellij-plugin — https://github.com/jimkyndemeyer/js-graphql- intellij-plugin — graphql.config.json ʹ API ͷΤϯυϙΠϯτ΍ඞཁͳ ϔομʔΛઃఆͯ͠࢖༻ YAPC::Okinawa 2018 ONNASON 23
24. { "schema": { "file": "graphql.schema.json", "request": { "url" : "http://--graphql-server--/path-to-schema-json-or-introspection-endpoint", "method" : "POST", "postIntrospectionQuery" : true, "README_options" : "See the 'Options' section at https://github.com/then/then-request", "options" : { "headers": { "user-agent" : "JS GraphQL" } } } }, "README_endpoints": "A list of GraphQL endpoints that can be queried from '.graphql' files in the IDE", "endpoints" : [ { "name": "Default (http://localhost:8080/graphql)", "url": "http://localhost:8080/graphql", "options" : { "headers": { "user-agent" : "JS GraphQL" } } } ] } YAPC::Okinawa 2018 ONNASON 24
25. YAPC::Okinawa 2018 ONNASON 25
26. ಋೖฤ·ͱΊ — GraphiQL Λ࢖͑͹खݩͰࢼͤΔ — graphql ϑΝΠϧʹฦΓ஋ͷఆٛΛॻ͕͘ɺॻ͘ࡍͷαϙʔτΛͯ͘͠ΕΔΤσΟλ ͷϓϥάΠϯ͕ఏڙ͞Ε͍ͯΔ — vscode — Intellij — etc. — ࠓͷͱ͜Ζ࢖͍ͬͯΔϓϥάΠϯͰࠔ͍ͬͯΔ͜ͱ͸ͳ͍͕ɺ͜Ε͕͋ͬͨΒͳʔͱ ͍͏ͱ͜Ζ͕গ͋͠Δ — graphql.config.json ͷ؅ཧ͕೉͍͠ — ߋ৽͕ࢭ·͍͍ͬͯͯͭ࢖͑ͳ͘ͳΔ͔Θ͔Βͳ͍ YAPC::Okinawa 2018 ONNASON 26
27. ࣮૷ฤ YAPC::Okinawa 2018 ONNASON 27
28. αʔόαΠυ — apollo-server — https://github.com/apollographql/apollo-server — Լهͷத͔Β޷͖ͳ΋ͷΛબΜͰ࢖͏͜ͱ͕Ͱ͖Δ — Express — koa — hapi — restify — lambda — micro — azure-functions — adonis YAPC::Okinawa 2018 ONNASON 28
29. apollo-server-koa import koa from 'koa'; // koa@2 import koaRouter from 'koa-router'; // koa-router@next import koaBody from 'koa-bodyparser'; // koa-bodyparser@next import { graphqlKoa, graphiqlKoa } from 'apollo-server-koa'; const app = new koa(); const router = new koaRouter(); const PORT = 3000; // koaBody is needed just for POST. router.post('/graphql', koaBody(), graphqlKoa({ schema: myGraphQLSchema })); router.get('/graphql', graphqlKoa({ schema: myGraphQLSchema })); router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' })); app.use(router.routes()); app.use(router.allowedMethods()); app.listen(PORT); YAPC::Okinawa 2018 ONNASON 29
30. ϑϩϯτ — @nuxtjs/apollo — https://github.com/nuxt-community/apollo-module — vue-apollo ͱ͍͏ .graphql ϑΝΠϧͷ Loader Λ nuxtjs Ͱ࢖͑ΔΑ͏ʹͨ͠΋ͷ YAPC::Okinawa 2018 ONNASON 30
31. @nuxtjs/apollo import { ApolloLink } from 'apollo-link' import { HttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' export default (ctx) => { const httpLink = new HttpLink({ uri: 'http://localhost:8000/graphql' }) // middleware const middlewareLink = new ApolloLink((operation, forward) => { const token = process.server ? ctx.req.session : window.__NUXT__.state.session operation.setContext({ headers: { authorization: `Bearer ${token}` } }) return forward(operation) }) const link = middlewareLink.concat(httpLink) return { link, cache: new InMemoryCache() } } YAPC::Okinawa 2018 ONNASON 31
32. iOS — apollo-ios — https://github.com/apollographql/apollo-ios — apollo-codegen — αʔόଆͰఆٛ͞Ε͍ͯΔ schema Λݩʹ Swift ϑΝ ΠϧΛੜ੒͢Δ CLI YAPC::Okinawa 2018 ONNASON 32
33. apollo-ios let queryString = "GraphQL" let configuration: URLSessionConfiguration = .default configuration.httpAdditionalHeaders = ["Authorization": "Bearer \(token)"] configuration.requestCachePolicy = .reloadIgnoringLocalCacheData // To avoid 412 let url = URL(string: "https://api.github.com/graphql")! let apollo = ApolloClient(networkTransport: HTTPNetworkTransport(url: url, configuration: configuration)) apollo.fetch(query: SearchRepositoriesQuery(query: queryString, count: 2), completionHandler: { (result, error) in if let error = error { print("Error: \(error)"); return } result?.data?.search.edges?.forEach { edge in guard let repository = edge?.node?.asRepository else { return } print("Name: \(repository.name)") print("Path: \(repository.url)") print("Owner: \(repository.owner.path)") print("Stars: \(repository.stargazers.totalCount)") } }) YAPC::Okinawa 2018 ONNASON 33
34. Android — apollo-android — https://github.com/apollographql/apollo-android — apollo-codegen — αʔόଆͰఆٛ͞Ε͍ͯΔ schema Λݩʹ Java ϑΝΠ ϧΛੜ੒͢Δ CLI YAPC::Okinawa 2018 ONNASON 34
35. apollo-android private void fetchRepositoryDetails() { ApolloCall<EntryDetailQuery.Data> entryDetailQuery = application.apolloClient() .query(new EntryDetailQuery(repoFullName)) .responseFetcher(ApolloResponseFetchers.CACHE_FIRST); //Example call using Rx2Support disposables.add(Rx2Apollo.from(entryDetailQuery) .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribeWith(new DisposableObserver<Response<EntryDetailQuery.Data>>() { @Override public void onNext(Response<EntryDetailQuery.Data> dataResponse) { setEntryData(dataResponse.data()); } @Override public void onError(Throwable e) { Log.e(TAG, e.getMessage(), e); } @Override public void onComplete() { } })); } YAPC::Okinawa 2018 ONNASON 35
36. apollo-codegen — https://github.com/apollographql/apollo-codegen — αʔόଆͰఆٛ͞Ε͍ͯΔ schema Λݩʹ Java ϑΝΠϧ Λੜ੒͢Δ CLI — Node.js ੡ YAPC::Okinawa 2018 ONNASON 36
37. apollo-codegen $ apollo-codegen generate **/*.graphql --schema schema.json --output API.swift YAPC::Okinawa 2018 ONNASON 37
38. apollo-codegen public struct AsRepository: GraphQLConditionalFragment { public static let possibleTypes = ["Repository"] public let __typename = "Repository" public let name: String public let owner: Owner public let stargazers: Stargazer public let url: String public init(reader: GraphQLResultReader) throws { name = try reader.value(for: Field(responseName: "name")) owner = try reader.value(for: Field(responseName: "owner")) stargazers = try reader.value(for: Field(responseName: "stargazers")) url = try reader.value(for: Field(responseName: "url")) } public struct Owner: GraphQLMappable { public let __typename: String public let path: String public init(reader: GraphQLResultReader) throws { __typename = try reader.value(for: Field(responseName: "__typename")) path = try reader.value(for: Field(responseName: "path")) } } public struct Stargazer: GraphQLMappable { public let __typename = "StargazerConnection" public let totalCount: Int public init(reader: GraphQLResultReader) throws { totalCount = try reader.value(for: Field(responseName: "totalCount")) } } } YAPC::Okinawa 2018 ONNASON 38
39. ࣮૷ฤ·ͱΊ — apollo ʹײँ ! — ͍͍ͩͨͷݴޠ͕αϙʔτ͞Ε͍ͯΔ — Perl ͸ͳ͔ͬͨ (´ɾТɾʆ) — Shopify Ͱ࢖ΘΕ͍ͯͯɺͦͷ։ൃऀ͕ϝϯςφϯε͍ͯ͠ ΔͷͰ҆৺ — ࡶͳ issue ΋ड͚෇͚ͯ͘ΕΔͷͰػೳͷཁ๬ͱ͔౤͛ͯ ΈΔͱ͍͍͔΋ YAPC::Okinawa 2018 ONNASON 39
40. YAPC::Okinawa 2018 ONNASON 40
41. ӡ༻ฤ YAPC::Okinawa 2018 ONNASON 41
42. ӡ༻ฤ — ΩϟογϡͬͯͲ͏ͳΔͷʁ — apollo-android Ͱ͸ 3 ͭͷํ๏Λαϙʔτ — HTTP Response Cache: ੜͷϨεϙϯεΛϑΝΠϧʹ͠ ͯΩϟογϡ — Normalized Disk Cache: SQL ʹಥͬࠐΜͰΩϟογϡ — Normalized InMemory Cache: ϝϞϦʹͭͬ͜ΜͰΩ ϟογϡ YAPC::Okinawa 2018 ONNASON 42
43. // HTTP Response Cache //Directory where cached responses will be stored File file = new File("/cache/"); //Size in bytes of the cache int size = 1024*1024; //Create the http response cache store DiskLruHttpCacheStore cacheStore = new DiskLruCacheStore(file, size); //Build the Apollo Client ApolloClient apolloClient = ApolloClient.builder() .serverUrl("/") .httpCache(new ApolloHttpCache(cacheStore)) .okHttpClient(okHttpClient) .build(); apolloClient .query( FeedQuery.builder() .limit(10) .type(FeedType.HOT) .build() ) .httpCachePolicy(HttpCachePolicy.CACHE_FIRST) .enqueue(new ApolloCall.Callback<FeedQuery.Data>() { @Override public void onResponse(@Nonnull Response<FeedQuery.Data> dataResponse) { ... } @Override public void onFailure(@Nonnull Throwable t) { ... } }); YAPC::Okinawa 2018 ONNASON 43
44. ӡ༻ฤ — CACHE_ONLY — Ωϟογϡ͚ͩݟʹߦ͘ɻAPI ୟ͍ͯऔಘ͠ʹ͍͔ͳ͍ɻΩϟογϡ͕ଘࡏ͠ͳ͔ͬͨ ͱ͖͸ΤϥʔʹͳΔ — NETWORK_ONLY — ΩϟογϡΛݟʹߦ͔ͣʹຖճ API Λୟ͍ͯऔಘ — CACHE_FIRST — ΩϟογϡΛ·ͣୈҰʹݟʹߦ͘ɻΩϟογϡ͕ͳ͔ͬͨΓͨ͠ͱ͖͸ API Λୟ͖ʹߦ ͘ — NETWORK_FIRST — API Λ·ͣୈҰʹୟ͖ʹߦ͘ɻAPI ϨεϙϯεͰΤϥʔ͕ฦ͖ͬͯͯɺΩϟογϡ͕·ͩ ࢒͍ͬͯΕ͹ͦΕΛ࢖͏ YAPC::Okinawa 2018 ONNASON 44
45. ӡ༻ฤ — Query ͸͍ͣΕ͔ͷํ๏Λ࢖͑͹ΩϟογϡՄೳ — Mutation ͸ෆՄ YAPC::Okinawa 2018 ONNASON 45
46. ӡ༻ฤ — ςετͷॻ͖ํ — UI ςετ͸جຊ΍Βͳ͍ — ωοτϫʔΫΤϥʔͷςετ — ಛఆͷ Type ʹͪΌΜͱύʔεͰ͖Δ͔Ͳ͏͔ YAPC::Okinawa 2018 ONNASON 46
47. @Test public void onNetworkError() throws Exception { final CountDownLatch countDownLatch = new CountDownLatch(1); final AtomicBoolean invoked = new AtomicBoolean(); final Handler callbackHandler = mockCallbackHandler(invoked); final AtomicReference<ApolloException> exceptionRef = new AtomicReference<>(); apolloClient.query(EMPTY_QUERY).enqueue(ApolloCallback.wrap(new ApolloCall.Callback() { @Override public void onResponse(@Nonnull Response response) { countDownLatch.countDown(); } @Override public void onFailure(@Nonnull ApolloException e) { countDownLatch.countDown(); } @Override public void onNetworkError(@Nonnull ApolloNetworkException e) { exceptionRef.set(e); countDownLatch.countDown(); } }, callbackHandler)); countDownLatch.await(TIMEOUT_SECONDS, TimeUnit.SECONDS); assertThat(invoked.get()).isTrue(); assertThat(exceptionRef.get()).isInstanceOf(ApolloNetworkException.class); } YAPC::Okinawa 2018 ONNASON 47
48. @Test public void onResponse() throws Exception { final CountDownLatch countDownLatch = new CountDownLatch(1); final AtomicBoolean invoked = new AtomicBoolean(); final Handler callbackHandler = mockCallbackHandler(invoked); final AtomicReference<Response> responseRef = new AtomicReference<>(); server.enqueue(new MockResponse().setResponseCode(200).setBody("{" + " \"errors\": [" + " {" + " \"message\": \"Cannot query field \\\"names\\\" on type \\\"Species\\\".\"," + " \"locations\": [" + " {" + " \"line\": 3," + " \"column\": 5" + " }" + " ]" + " }" + " ]" + "}")); apolloClient.query(EMPTY_QUERY).enqueue(ApolloCallback.wrap(new ApolloCall.Callback() { @Override public void onResponse(@Nonnull Response response) { responseRef.set(response); countDownLatch.countDown(); } @Override public void onFailure(@Nonnull ApolloException e) { countDownLatch.countDown(); } }, callbackHandler)); countDownLatch.await(TIMEOUT_SECONDS, TimeUnit.SECONDS); assertThat(invoked.get()).isTrue(); assertThat(responseRef.get()).isNotNull(); } YAPC::Okinawa 2018 ONNASON 48
49. ·ͱΊ — GraphQL ͷ࣮૷ʹ͍ͭͯ͝঺հ͠·ͨ͠ — ಋೖ͸ϥΠϒϥϦͷ README ͕੔͍ͬͯΔ͓͔͛ͰָʹՄೳ — ࣮૷ɾӡ༻͸ϥΠϒϥϦʹࠨӈ͞ΕΔ — ֤ϓϥοτϑΥʔϜͰศརͳϥΠϒϥϦ͕ἧ͍ͬͯΔͨΊɺී௨ʹ࣮ ૷͸Ͱ͖ͦ͏ — ·ͩ·ͩࢀߟهࣄ͕গͳ͘ɺͪΐͬͱ͸·Δͱݫ͍͠ͱ͖͕͋Δ — ͔͜͜Β੝Γ্͕͖ͬͯͯɺ஌ݟ͕ͨ͘͞ΜΞ΢τϓοτ͞ΕΔͷ Λظ଴ʂ YAPC::Okinawa 2018 ONNASON 49
50. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ࠙਌ձ·Ͱ͍ΔͷͰԿ͔࣭໰౳͋Ε͹੠͔͚͍ͯͩ͘͞ʂ ʢTwitter ͔ΒͰ΋ OK Ͱ͢ʣ YAPC::Okinawa 2018 ONNASON 50