Today let’s unveil the mystery of GraphQL!

The implementation code is already on Github :github.com/huisunyang/…

Graphql website: graphql. Cn/learn /

Why graphQL?

In contrast to the most common REST, when we send a request to the back end, the data returned from the back end may not always be what we need, but more often than not. The amount of data transmitted is also higher. Graphql implements the front-end to request the required fields according to the UI itself, without causing redundant data requests

Specific reference: www.jianshu.com/p/f45fe96de…

How to implement the front end

The most commonly used graphQL Client is Apollo Client, of course vue also does inheritance

Vue-apollo concrete implementation

Install dependencies
npm install -S apollo-cache-inmemory apollo-client apollo-link apollo-link-context apollo-link-http vue-apollo
Copy the code
npm install --save graphql graphql-tag
Copy the code
Create the file apolloclient.js
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloLink } from 'apollo-link'Const httpLink = createHttpLink({// you need to use the absolute path here to make sure that the path URI ends in graphQL:'https:/xxxxxxxxxxxxxxxxxxxxxxxx/graphql'Const middlewareLink = new ApolloLink((operation, forward) => {operation.setContext({headers: {headers: {'Application-Id': 'xxxxx'}})returnConst cache = new InMemoryCache() // Create a const apolloClient = new apolloClient ({  link: middlewareLink.concat(httpLink), cache })export default apolloClient
Copy the code
Introduced in the main. Js
import VueApollo from 'vue-apollo'
import ApolloClient from './network/apolloClient'
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
  defaultClient: ApolloClient
})
Vue.config.productionTip = false

new Vue({
  router,
  apolloProvider,
  render: h => h(App)
}).$mount('#app')
Copy the code
Page use
 const getECards = gql`query ($page:Int,$pageSize:Int) {
        usedDetailStatistics (page:$page,pageSize:$pageSize) {
          data {
            orderId
          }
          totalPages
          totalElements
        }
        test
      }`
    this.$apollo.query({
      query: getECards,
      variables: {
        page: 0,
        pageSize: 20
      }
    }).then(res => {
      console.log('1233456', res)
    })
Copy the code

Specifically used as described above. Here’s my trip to the pit…

Summary on pit

1. The method of the back-end interface is GET, and the query request of the front end prompts that the request method is incorrect?

This is because the graphQL request sent by the front end, whether query or mutation, is a POST request.

2. Graphql requests the browser to display the type of network as FETCH

This is the difference between GraphQL and REST, where the rest request type is XHR, XMLHttpRequest, whereas graphQL is FETCH

For the difference between FETCH and Ajax, please refer to :juejin.cn/post/684490…

3. Can the front end of graphQL interface be called through REST?

Yes, the graphQL website proposes to support both methods

4. Interface path of GraphQL

Remember, the interface path for Graphql must end in /graphql ！！！！ This pit we for a long time, the official document also has explained, so say good look at the document is how important ！！！！

5, about the transmission of parameters

Dynamic parameter transmission is generally divided into three steps:

gql`query ($page:Int,$pageSize:Int,$beginDate$usedDetailStatistics (page: $usedDetailStatistics) {$usedDetailStatistics (page: $usedDetailStatistics);$page,pageSize:$pageSize,beginDate:$beginDate) {//2, data {orderId} totalPages totalElements}test
      }`
this.$apollo.query({query: getECards, //3, pass variables: {page: 0, pageSize: 20, beginDate:'2020-01-01'
      }
    }).then(res => {
      console.log('1233456', res)
    })

Copy the code

If you encounter a parameter type defined by the backend, pass it by the type name defined by the backend, such as LocalDate