Client-side GraphQL at scale

Given at GraphQL Summit 2019. Discusses the tools and techniques we use on the client side at Shopify to manage large, GraphQL-powered applications.

Transcript

1. Client-side GraphQL at scale
4. MyQuery.graphql MyQuery.graphql MyQuery.graphql query MyQuery { shop { id } } core-schema.graphql schema { query: QueryRoot mutation: Mutation } ~700 GraphQL operations ~1000 Types (core schema)
6. 1. In application code 2. At build time 3. In component tests Client GraphQL
7. Developing
9. https://github.com/ Shopify/graphql- tools-web $ yarn install graphql-typescript- definitions graphql-typescript-definitions
10. https://github.com/ Shopify/quilt $ yarn install @shopify/react- graphql @shopify/react-graphql
11. Demo Time
12. Building
13. CustomerDetails.graphql query CustomerDetails($id: ID!) { customer(id: $id) { id firstName lastName displayName } } main.js
14. https://github.com/ apollographql/ graphql-tag $ yarn install graphql-tag graphql-tag/loader
16. https://github.com/ Shopify/graphql- tools-web $ yarn install graphql-mini- transforms graphql-mini-transforms
18. ~30KB Removed bundle size (gzip, ~25% of total)
21. Testing
22. fixture.json { "customer": { "id": "123", "firstName": "Chris", "lastName": "Sauve" "displayName": "Chris Sauve" } }
23. CustomerDetails.graphql query CustomerDetails($id: ID!) { customer(id: $id) { id firstName lastName displayName } }
24. fixture.json { "customer": { "id": "123", "firstName": "Chris", "lastName": "Sauve" } }
25. FAIL CustomerDetailsQuery/fixture.json customer.displayName should be a string, but was undefined
26. fixture1.json { "customer": { "id": "123", "firstName": "Chris", "lastName": "Sauve" "displayName": "Gord Pearson" } } fixture2.json { "customer": { "id": "123", "firstName": "Chris", "lastName": "Sauve" "displayName": "Mathew Allen" } } fixture3.json { "customer": { "id": "123", "firstName": "Chris", "lastName": "Sauve" "displayName": "Michelle Chen" } }
27. https://github.com/ Shopify/graphql- tools-web $ yarn install graphql-fixtures graphql-fixtures
28. https://github.com/ Shopify/quilt $ yarn install @shopify/graphql- testing @shopify/graphql-testing
29. Demo Time
30. Fin https://github.com/Shopify/ graphql-tools-web graphql-typescript-definitions graphql-mini-transforms graphql-fixtures https://github.com/Shopify/ quilt @shopify/react-graphql @shopify/graphql-persisted @shopify/graphql-testing … and 70 more React-focused libraries! Shopify https://shopify.com/careers Chris Sauve (me) https://github.com/lemonmade