Vue-apollo — 在Vue-cli項目中使用Graphql

TIGERB 發布于2019-08-22 15:36 / 2586人閱讀

摘要：在項目中使用當然我們可以通過直接在中攜帶參數直接請求，這樣太過麻煩。為我們提供了一整套解決方案，可以解決大部分問題。本篇文章將介紹如何在你的項目中簡單使用和一些目前遇到的小坑。

Vue-apollo — 在Vue-cli項目中使用Graphql

Vue-apollo  — Integrates apollo in your Vue components with declarative queries.

當然我們可以通過直接在url中攜帶參數直接請求，這樣太過麻煩。vue-apollo為我們提供了一整套解決方案，可以解決大部分問題。

本篇文章將介紹如何在你的vue-cli項目中簡單使用vue-apollo和一些目前遇到的小坑。

安裝

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

創建ApolloClient實例, 安裝VueApollo插件

import Vue from "vue"
import { ApolloClient } from "apollo-client"
import { HttpLink } from "apollo-link-http"
import { InMemoryCache } from "apollo-cache-inmemory"
import VueApollo from "vue-apollo"

const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: "http://localhost:3020/graphql",
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

// Install the vue plugin
Vue.use(VueApollo)

如果你開啟了vue-cli提供的代理, 這里同樣適用.

創建PROVIDER

就像vue-router與vuex一樣, 需要將apolloProvider添加為根組件.

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

new Vue({
  el: "#app",
  provide: apolloProvider.provide(),
  render: h => h(App),
})

quasar-cli 中安裝

如果你不了解Quasar Framework并且不打算使用, 這段可以跳過.

在plugins目錄中創建新的js文件, 并在 quasar.conf.js 中加入它.

打開創建好的文件:

import {ApolloClient} from "apollo-client"
import {HttpLink} from "apollo-link-http"
import {InMemoryCache} from "apollo-cache-inmemory"
import VueApollo from "vue-apollo"


// Create the apollo provider
const apolloProvider = new VueApollo({
  defaultClient: new ApolloClient({
    link: new HttpLink({
      // You should use an absolute URL here
      uri: "http://localhost:3020/graphql",
    }),
    cache: new InMemoryCache(),
    connectToDevTools: true
  })
})

// leave the export, even if you don"t use it
export default ({ app, Vue }) => {
  // something to do
  Vue.use(VueApollo)
  app.provide = apolloProvider.provide()
}

使用 query

需要提前在組件中定義graphql字符串.

data中必須提前創建apollo中相應字段且字段名必須相同.

通過gql創建graphql字符串, 特別注意:使用 query(){return gql` } 用來創建需要計算得到的字符串, 如字符串中攜帶${this.hello}等. 純字符串可用query:gql` 直接創建.

loadingKey指定data中創建的字段, 用于表示狀態, loadingKey應為初始值為0的整數. 處于加載狀態時會執行loadingKey++操作, 加載結束會執行loadingKey—操作.

mutation

隨時使用, 不需要提前聲明或定義. 請求結果為一個promise.

this.$apollo.mutate({
      // Query
      mutation: gql`mutation ($label: String!) {
        addTag(label: $label) {
          id
          label
        }
      }`,
      // Parameters
      variables: {
        label: this.newTag,
      }
}).then(data=>{
    console.log(data)
}).catch(error=>{
    console.log(error)
})

并沒有mutation(){return gql`} 這樣的操作, 所以計算屬性需要通過 variables`傳入. 當然這種方法也適用于query.

數據更新

一般的, 在組件創建時會發起一次query請求. 如果需要重新請求數據:this.$apollo.queries.<$name>.refetch()

如 this.$apollo.queries.hello.refetch() 請求指定字段.

請求發起后loadingKey也將重新計算.

GPU云服務器云服務器 webrtc怎么實際應用在項目中 webrtc項目中的stl庫在哪里在php中使用組件在VBScript中使用類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93590.html

在vue項目中集成graphql 即vue-ApolloClient

摘要：什么是是一個用于的查詢語言，是一個使用基于類型系統來執行查詢的服務端運行時下圖展示所處的位置優點有強類型是強類型的，可使用來定義。 1.什么是graphqlGraphQL 是一個用于 API 的查詢語言，是一個使用基于類型系統來執行查詢的服務端運行時下圖展示graphql所處的位置showImg(https://segmentfault.com/img/bVbgDGe?w=905&h=...

princekin 2019-08-23 11:51 評論0 收藏0
GraphQL 科普前端向

摘要：樣例前端傳入字段和結構。后臺按照前端的需求返回數據。則將前后臺通信直接分為兩大類和。顧名思義，是默認的操作符，代表查詢，是不會給服務端帶來副作用的請求。文檔文檔部分文檔就是前端向后臺描述所需的字段。降低前后端溝通成本。簡介 showImg(https://segmentfault.com/img/bVbmKX5?w=150&h=150); GraphQL是基于「類型系統」來執行查詢的...

Bmob 2019-08-23 14:31 評論0 收藏0
如何優雅的在Vue Project中使用vue-apollo

摘要：首先我們來熟悉下的工作機制一個查詢可以包含一個或者多個操作，類似于一個。操作可以使兩種類型查詢或者修改。以后就又可以愉快的裝逼了本文章只適于初學者作者考拉閱讀前端工程師首先我們來熟悉下graphql的工作機制一個GraphQL查詢可以包含一個或者多個操作（operation），類似于一個RESTful API。操作（operation）可以使兩種類型：查詢（Query）或者修改（m...

Noodles 2019-08-20 18:37 評論0 收藏0
前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
vue-cli中chainWebpack的使用

摘要：這個庫提供了一個原始配置的上層抽象，使其可以定義具名的規則和具名插件，并有機會在后期進入這些規則并對它們的選項進行修改。它允許我們更細粒度的控制其內部配置。接下來有一些常見的在中的修改的例子。前言在項目開發中我們難免碰到需要對webpack配置更改的情況，今天就主要來講一下在vue.config.js中對一些配置的更改，簡單介紹一下loader的使用；用configureWebpa...

tomlingtm 2019-08-02 15:40 評論0 收藏0