Use GraphQL nicely with Nuxt.js

1. Use GraphQL nicely
 with Nuxt.js Takanori Oki @Forefront JavaScript
2. Self Introduction - Takanori Oki / @takanorip - SmartDrive inc. / Frontend Developer - React, Vue, Polymer, Web Creation - PolymerJapan Translation Team - I love free-font
4. Who is SmartDrive ?
6. We use GraphQL / Nuxt.js in Our Production
8. I skip over the explanation of GraphQL and Nuxt.js Because we don’t have enough time…
9. If you want to know more about GraphQL, please read this article.
11. Why ?
12. Reasons - Need flexible design for server-side - Many stakeholders, not fixed design, the specifications be fixed locally…å - Want to split the front-end and server-side tasks
13. How ?
14. @nuxt/apollo-module - Nuxt.js module to use vue-apollo - vue-apollo is a library integrates Apollo in Vue components - Apollo is the GraphQL client for JavaScript - It was very difficult for me to upgrade to Apollo Client 2.0…
15. 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: 'xxx' }) // middleware const middlewareLink = new ApolloLink((operation, forward) => { const token = 'xxx' operation.setContext({ headers: { authorization: `Bearer ${token}` } }) return forward(operation) }) const link = middlewareLink.concat(httpLink) return { link, cache: new InMemoryCache() } }
16. query colors($id: Int) { colors(id: $id) { base_code base_name code images { car_color_id created_at image_url } name } }
17. apollo: { cars: { prefetch: true, query: car, variables () { return { id: this.id } }, fetchPolicy: 'cache-and-network' } }
18. Tips & Feeling
19. Tips
20. Using with asyncData - asyncData is called every time before loading the component - Apollo method is called after mounted, So users can see the blank page… - We need to call Apollo and get data before loading the component
21. async asyncData ({ app, params }) { const result = await app.apolloProvider.defaultClient.query({ query: carInfo, variables: { 'id': parseInt(params.id, 10) } }) const cars = result.data.cars return { cars } }
22. update - We can use a function for the query option and change data of the component - This will update the graphql query definition automatically
23. apollo: { cars: { prefetch: true, query: carInfo, variables () { console.log() return { id: this.id } }, update ({ cars }) { this.order.lease_plan_id = cars[0].plans[2].id return cars[0] }, fetchPolicy: 'cache-and-network' } }
24. Feeling - It is useful for us because we can get variousɹ data from the same endpoint - When we need different data, we do only changing query - grahiql is very very useful !
25. We're Hiring !
26. Thank you ! (font : Pier Sans)