API Meetup Tech Deep Dive #2: GraphQLでのFlagship Alexさんの講演資料です。ご本人から許可をいただいて掲載しています。

1. About
! Flagship
○ Only Shopify Plus Partners in Japan and first to
become Shopify Experts in Japan
○ We provide solid development, localization and
marketing in Japan and abroad

2. About
! Flagship
○ Only Shopify Plus Partners in Japan and first to
become Shopify Experts in Japan
○ We provide solid development, localization and
marketing in Japan and abroad
! Alex Karpov
○ Software Developer

3. About
! Flagship
○ Only Shopify Plus Partners in Japan and first to
become Shopify Experts in Japan
○ We provide solid development, localization and
marketing in Japan and abroad
! Alex Karpov
○ Software Developer

4. About
! Flagship
○ Only Shopify Plus Partners in Japan and first to
become Shopify Experts in Japan
○ We provide solid development, localization and
marketing in Japan and abroad
! Alex Karpov
○ Software Developer

5. About
! Flagship
○ Only Shopify Plus Partners in Japan and first to
become Shopify Experts in Japan as well
○ Provide solid development, localization and
marketing in Japan and abroad
! Alex Karpov
○ Software Developer
www.Flagship.cc

6. Shopify
GraphQL API
Alex Karpov
Flagship LLC

7. Shopify
Sell on other channels
Online
Facebook
In brick and mortor stores
With point of sale devices
Even inside mobile/computer games
They also do VR and AR
SaaS
Take care business
- Fulfillment, Inventory, Reporting,
Tracking etc etc..
Take care of the DevOps & Sec,
fraudulent payments etc
Canadian Company

8. 1. Agenda
➔ Why GraphQL & Shopify?

9. 1. Agenda
➔ Why GraphQL & Shopify?
➔ Storefront API with GraphQL

11. Why?

12. /api/products.json
REST

13. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
REST

14. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
/api/v1/products_for_ios.json
/api/v1/products_for_android.json
/api/v2/products_for_ios.json
/api/v2/products_for_android.json
…..
REST

15. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
/api/v1/products_for_ios.json
/api/v2/products_for_ios.json
…..
REST
SELECT *by default

16. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
/api/v1/products_for_ios.json
/api/v2/products_for_ios.json
…..
REST
SELECT *by default
Field selection

17. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
/api/v1/products_for_ios.json
/api/v2/products_for_ios.json
…..
REST
SELECT *by default
Field selection
Sideloading

18. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
/api/v1/products_for_ios.json
/api/v2/products_for_ios.json
…..
REST
SELECT *by default
Field selection
Sideloading
Identifiers

19. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
/api/v1/products_for_ios.json
/api/v2/products_for_ios.json
…..
REST
SELECT *by default
Field selection
Sideloading
Identifiers
Deprecation of fields / endpoints

20. /api/products.json
/api/products_for_ios.json
/api/products_for_android.json
/api/v1/products_for_ios.json
/api/v2/products_for_ios.json
…..
REST
SELECT *by default
Field selection
Sideloading
Identifiers
Deprecation of fields / endpoints
Missing or Nil (null) fields

21. products: [...]
REST

22. products: [
{product: {...}
]
REST

23. products: [
{product: {
product_images: []
REST

24. products: [
{product: {
product_images: []
product_reviews: []
REST

25. products: [
{product: {
product_images: []
product_reviews: [
{ reviewer: {
name: ..
avatar_urls:[...]
REST

26. products: [
{product: {
product_images: []
product_reviews: [
{ reviewer: {
name: ..
avatar_urls:[...]
REST

27. GraphQL
Example

28. Benefits of GraphQL
Used internally for 4+ years
Chosen during their massive
mobile rewrite
So far so good!
Single Endpoint
Single Query Spec
Single Response Spec
Single Mutation Spec
Consistent Error Specs

29. Why?
➔ Very Powerful Mobile App Powered by GraphQL
➔ Single Endpoint for iOS and Android

30. GraphiQL
Enhancing Developer Experience
! In-browser IDE
! Embedded documentation
! Easy exploration of options
! Hints & Errors
! Helpful documentation
! JSON Viewer
! Much more...
https://graphql.github.io/swapi-graphql/

31. Sample projects galore
To see it in ACTION
Tip
Don’t wait till the end of
the presentation to give
the bottom line.
Reveal your product or
idea (in this case a
translation app) up front.

32. Sample projects galore
To see it in ACTION
Tip
Don’t wait till the end of
the presentation to give
the bottom line.
Reveal your product or
idea (in this case a
translation app) up front.
https://github.com/Shopify/storefront-api-examples

33. Storefront API
- All customer facing features
Admin API
- Merchant facing features

34. Storefront Buy SDKs
The Storefront API gives you full creative control to build customized
purchasing experiences for your customers.
! Fetch data about a single product or a collection
! Create unique checkout experiences
! Full control over the shopping cart
! Create new customers
! Modify existing customers
! Customers can select unique product options

35. Storefront Buy SDKs
The Storefront API gives you full creative control
to build customized purchasing experiences for
your customers.

36. Storefront Buy SDKs
The Storefront API gives you full creative control
to build customized purchasing experiences for
your customers.

37. Storefront Buy SDKs
The Storefront API gives you full creative control
to build customized purchasing experiences for
your customers.

38. Storefront Buy SDKs
The Storefront API gives you full creative control
to build customized purchasing experiences for
your customers.

39. This means you can sell
merch & digital assets
directly inside your game
+ +

40. This means you can sell
merch & digital assets
directly inside your game
+ +

41. Thank you
Resources
https://help.shopify.com/en/api/graphql-admin-api
https://help.shopify.com/en/api/custom-storefronts/storefront-api/graphql
http://www.flagship.cc/