Save 37% off PRO during our Black Friday Sale! »

Use GraphQL nicely 
with Nuxt.js

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
February 26, 2018

Use GraphQL nicely 
with Nuxt.js

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

February 26, 2018
Tweet

Transcript

  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
  3. None
  4. Who is SmartDrive ?

  5. None
  6. We use GraphQL / Nuxt.js in Our Production

  7. None
  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.
  10. None
  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)