Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Graph API

Introduction to Graph API

Avatar for Yosuke Kurami

Yosuke Kurami

May 27, 2016
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. SPA

  2. 1. Thin endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph

    API”, “author”: “/api/v1/users/u0001” } ɂ Ʌ Get /api/v1/articles/123 Get /api/v1/users/u0001 { “id”: “u0001”, “name”: “quramy” }
  3. 2. Fat endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph

    API”, “author”: { “id”: “u0001”, “name”: “quramy” } } ɂ Ʌ Get /api/v1/articles/123
  4. Ideal endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph api”,

    “author”: { “id”: “u0001”, “name”: “quramy” } } ɂ Ʌ { “where”: “/article?id=123”, “properties”: [ “id”, “title”, “author”: { “properties”: [“id”, “name”] }] }
  5. There are 2 major libraries GraphQL powered by Facebook http://graphql.org/

    Falcor powered by Netflix http://netflix.github.io/falcor/
  6. GraphQL: GraphQL is a query language import assert from "assert";

    import { parse } from "graphql/language"; import { execute } from "graphql/execution"; import { schema } from "./schema"; execute(schema, parse(` { article(id :"123") { id, title, author { id, name } } } `)).then(response => { assert.deepEqual(response.data, { article: { id: "123", title: "graph api", author: { id: "u0001", name: "quramy" } } }); });
  7. GraphQL: pros/cons • Pros: • JavaScriptҎ֎Ͱ΋৭ʑͳݴޠ(Java, golang, Ruby, etc…)Ͱར༻Մೳͳlibrary ͕͋Δɻ

    • GraphiQl౳΍Chrome Extension౳ɺ։ൃิॿπʔϧ͸๛෋ɻ • Cons: • शಘίετ͕ߴ͍. SchemaΛख૊ΈͰ૊ΉͱࢮͶͦ͏. • Relay(React.js + GraphQLͷϑϨʔϜϫʔΫ)͸ߴػೳͰ͋ΔҰํɺGraphQL ࣗମͷRIͰ͋ΔGraphQL.js͸ը໘͔Β࢖͏͜ͱΛߟ͑Δͱ૬౰γϣϘ͍ɻ൒ ڧ੍తʹReact.jsʹϩοΫΠϯ͞Εͦ͏ɻ
  8. Falcor: Access as the JSON way import { Model }

    from "falcor"; import { dataSource } from "./dataSource"; import assert from "assert"; new Model({ source: dataSource, }).get( "article['123']['id', 'title']", "article['123'].author['id', 'name']" ).subscribe(response => { assert.deepEqual(response.json, { article: { "123": { id: "123", title: "graph api", author: { id: "u0001", name: "quramy" } } } }); });
  9. Falcor: pros/cons • Pros: • ࢓૊Έ͕୯७Ͱ͋Γɺशಘ͕༰қɻ • ७ਮͳData Fetching Library

    Ͱ͋ΔͨΊɺClient-Side MVC͕ϩοΫΠϯ͞Ε ͳ͍ɻAngularͩΖ͏ͱVue.jsͩΖ͏ͱԿͰ΋૊Έ߹ΘͤΒΕΔɻ • falcor.jsʹCaching, Batching, onChange౳, ͋Δͱخ͍͠ػೳ͸Ұ௨Γἧͬͯ ͍Δ • Cons: • Server-Side࣮૷͸جຊతʹNode.jsҰ୒(ҰԠC#࣮૷΋͋ΔΒ͍͚͠Ͳ…) • ࣮ߦ͠ͳ͍ͱJSON Graphͷܕ৘ใΛऔಘग़དྷͳ͍
  10. GraphQL v.s. Falcor • GraphQLʹ͸ݫີͳSchemaఆ͕ٛଘࡏ͢ΔҰํ, Falcorʹ͓͚ ΔJSON Graphߏ଄͸҉໧஌(ͦͷ෼, ֶश΍࣮૷ίετ͸௿Ί) •

    Server-SideͱClient-Sideͷ࣮૷νʔϜ͕෼཭͞Ε͍ͯΔ৔߹͸ GraphQLબΜͩํ͕ྑ͍͸ͣɻ • ٯʹ, Front-End νʔϜ͕Endpointͷ࣮૷·Ͱग़དྷΔͷͰ͋Ε ͹, FalcorͰඞཁॆ෼ͳέʔε͕ଟͦ͏ɻ
 

  11. Graph API • طଘͷREST endpointΛϥοϓ͢Δ༻్ͷ৔߹ɺͦΕ΄ͲϝϦοτ͸ແ ͍ɻ
 ಛʹViewʹಛԽͨ͠EndpointઃܭΛ͍ͯ͠ΔέʔεͰ͸Ұ౓Graphͷܗࣜ ʹਖ਼نԽ͢Δख͕͔͔ؒΔ͚͔ͩ΋ɻ • MicroServicesͷจ຺ʹ͓͍ͯ,

    ෳ਺ͷDown Stream ServiceΛଋͶΔ໨త ʹ͸ڧ͍(API Gateway, Backend-For-Fronend ౳) • ʮMonolithic ͳServiceΛෳ਺෼ׂ͢Δ࣌ʹFront͕ઌߦͯ͠ಋೖ͢Δʯͷ Α͏ͳಋೖ͸ݱ࣮త͔