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

princekin 發布于2019-08-23 11:51 / 2459人閱讀

摘要：什么是是一個用于的查詢語言，是一個使用基于類型系統來執行查詢的服務端運行時下圖展示所處的位置優點有強類型是強類型的，可使用來定義。

1.什么是graphql
GraphQL 是一個用于 API 的查詢語言，是一個使用基于類型系統來執行查詢的服務端運行時
下圖展示graphql所處的位置

2.優點

1.GraphQL API 有強類型 schema
    GraphQL schema是強類型的，可使用SDL(GraphQL Schema Definition Language)來定義。比如，可以使用構建工具驗證API請求，編譯時檢查API調用可能發生的錯誤
2.按需獲取 
    在不添加后端接口的前提下減少不必要的字段，做到前端自主訂閱字段

3.使用 vue集成graphql

1.安裝vue腳手架 npm install -g vue-cli 
2.安裝vue-apollo客戶端 vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 
3.webpack.base.conf.js 安裝加載器加載graphql后綴文件
    {
        test: /.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: "graphql-tag/loader"
     },

4.main.js 添加
    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
       //config.js 代理設置
       // "/graphql": {
       //         target: "http://eshipe.net:3000/graphql",
       //         changeOrigin: true,
       //         pathRewrite: {
       //            "^/graphql": "/graphql"
       //         }
       //     },
      uri: "/graphql",//訪問地址,在這里使用代理
    })

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

    // Install the vue plugin
    Vue.use(VueApollo)
    const apolloProvider = new VueApollo({
        defaultClient: apolloClient,
    })

    new Vue({
        router,
        store,
        provide: apolloProvider.provide(),//注冊全局組件
    }).$mount("#app")
    
5.添加search.graphql文件
    //定義查詢
    query q_user($id: Int){
      User(id: $id){
        id
        address
        name
      }
    }
    
6.具體的vue組件中
    1.import gql from "graphql-tag";
    2.import {q_user} from"search.graphql"
    3. 具體方法中使用
      this.$apollo.query({
          query: q_user,
          variables: {
            id: 1,
          },
      }).then(res => {
          console.log(res)
      }).catch(err => {
          console.log(err)
      })

4.可能遇到的問題

1.npm版本問題
    解決思路:npm版本回退 npm install -g npm@4.6.1

GPU云服務器云服務器云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上阿里云服務器搭建vue項目

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

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

前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

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

wall2flower 2019-08-21 11:55 評論0 收藏0
前端清單第 27 期：React Patent License 回復，Shopify WebVR 購

摘要：新聞熱點國內國外，前端最新動態就開源許可證風波進行回復數周前，基金會決定禁止旗下項目使用，因為其在標準的許可證之外添加了專利聲明此舉引發了社區的廣泛討論，希望能夠更新其開源許可證。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清單第 27 期：React Patent License 回復，Sho...

jeffrey_up 2019-08-21 12:03 評論0 收藏0
2017 年崛起的 JS 項目

摘要：通過對比各項目過去個月在上新增數量，來評估其在年度的受關注程度，進而選出年度領域崛起的明星項目。也許正因為上述最后一點，在中國擁有大量的擁躉。不僅被中國最大的電商平臺阿里巴巴使用，也獲得了與這些公司青睞。共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項目的部分中文版翻譯、校對工作，感謝 Sacha Grief，Micheal Ramberu 的統計整理，以及 Fr...

gaara 2019-08-22 13:57 評論0 收藏0
weex踩坑之旅第二彈 ~ 在weex中集成vue-router

摘要：也就是說在中，我們的代碼是要在環境中運行。而在中，是沒有等以及的，即所有的框架都是不可以使用的。比如相關組件，相關組件，等都不能在中引用。是可以在中使用的。接著第一彈講，我們已經搭建好一個屬于自己的weex項目了，然后如何開發呢？由于之前項目中都是采用vue全家桶進行開發，路由使用vue-router插件，狀態管理使用vuex，Ajax前后臺交互使用axios，圖標庫使用font-a...

tyheist 2019-08-21 18:25 評論0 收藏0
“別更新了，學不動了” 之：全棧開發者 2019 應該學些什么？

摘要：但是，有一件事是肯定的年對全棧開發者的需求量很大。有一些方法可以解決這個問題，例如模式，或者你可以這么想，其實谷歌機器人在抓取單頁應用程序時沒有那么糟糕。谷歌正在這方面努力推進，但不要指望在年會看到任何突破。對于什么是全棧開發者并沒有一個明確的定義。但是，有一件事是肯定的：2019 年對全棧開發者的需求量很大。在本文中，我將向你概述一些趨勢，你可以嘗試根據這些趨勢來確定你可能要投入的...

NervosNetwork 2019-08-23 14:48 評論0 收藏0