快捷導(dǎo)航

graphQL在前端vue中使用實(shí)例代碼

更新時(shí)間：2023年03月24日 14:42:37 作者：勇敢*牛牛

這篇文章主要介紹了graphQL在前端vue中使用過(guò)程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

上回說(shuō)到，那個(gè)請(qǐng)求攔截的一個(gè)過(guò)程，我上次不會(huì)看官網(wǎng)教程，這次，終于有了新的發(fā)現(xiàn)。

之前介紹過(guò)vue中使用GraphQL的實(shí)例代碼，喜歡的朋友可以點(diǎn)擊查看。

graphQL的interceptors（請(qǐng)求攔截器）

import ApolloClient from 'apollo-boost';


const apolloClient = new ApolloClient({
  // 你需要在這里使用絕對(duì)路徑
  uri: 'https://countries.trevorblades.com/',
  // headers:{"Authorization":"Basic aW5zaWdodHM6MTIz","content-type":"application/json"},
  request:(operation)=>{
    // 繼續(xù)上次的探索之旅，每次請(qǐng)求之前執(zhí)行這樣的代碼
    console.log("before=>",operation);
    // 每次請(qǐng)求都會(huì)執(zhí)行這個(gè)攔截器,可以設(shè)置請(qǐng)求頭
    operation.setContext({
      headers:{
        Authorization:"Basic aW5zaWdodHM6MTIz"
      }
    })
    console.log("after=>",operation.getContext().headers);
  },
  onError:(e)=>{
    // 失敗錯(cuò)誤信息打印
    console.log("err=>",e)
  },
  clientState:{
    
  },
})

export default apolloClient;

錯(cuò)誤處理

如果請(qǐng)求失敗，這里的情況也會(huì)分為兩種。
第一，可能是graphql的語(yǔ)法錯(cuò)誤導(dǎo)致的請(qǐng)求。
第二，可能是networkError導(dǎo)致的錯(cuò)誤，語(yǔ)法錯(cuò)誤。

const apolloClient = new ApolloClient({
  // 你需要在這里使用絕對(duì)路徑
  uri: 'https://countries.trevorblades.com/',
  // 請(qǐng)求選項(xiàng)
  fetchOptions: {
    credentials: 'include',//是否包含憑證
  },
  request:(operation)=>{
    operation.setContext({
      headers:{
        Authorization:"Basic aW5zaWdodHM6MTIz",
        contentType:"application/json"
      }
    })
  },
  onError:({ graphQLErrors, networkError })=>{
    if (graphQLErrors) {
     console.log("graphQLErrors");// 失敗錯(cuò)誤信息打印
    }
    if (networkError) {
      console.log("networkError");
    }
    
  },
  clientState:{
    
  },
})

因?yàn)榫W(wǎng)速問(wèn)題，我就暫時(shí)的探索到這兒。
前幾天的網(wǎng)絡(luò)出現(xiàn)了問(wèn)題，然后發(fā)現(xiàn)我前端作為學(xué)習(xí)的這個(gè)https://countries.trevorblades.com/地址，出現(xiàn)了變化，也就是UI界面人家可能重新采用了一個(gè)。

在這里插入圖片描述

變成了這種效果，可能是我網(wǎng)絡(luò)這邊有問(wèn)題，請(qǐng)求的時(shí)候有點(diǎn)延遲。
然后好像對(duì)部分請(qǐng)求類型做了補(bǔ)充和優(yōu)化。

前面學(xué)習(xí)了graphql的概念，graphql的部分語(yǔ)法，以及基礎(chǔ)查詢，帶參數(shù)的查詢，攔截器用法，錯(cuò)誤處理。接下來(lái)深入學(xué)習(xí)一下，上傳json字符串，和如何去上傳和請(qǐng)求流式文件并轉(zhuǎn)化。

目前為止，我們只討論過(guò)簡(jiǎn)單的字符串等標(biāo)量值作為參數(shù)傳遞給字段，但是你也能很容易地傳遞復(fù)雜對(duì)象。這在變更（mutation）中特別有用，因?yàn)橛袝r(shí)候你需要傳遞一整個(gè)對(duì)象作為新建對(duì)象。在 GraphQL schema language 中，輸入對(duì)象看上去和常規(guī)對(duì)象一模一樣，除了關(guān)鍵字是 input 而不是 type。

為了方便演示學(xué)習(xí)，我又找了一個(gè)graphql的接口
https://hasura.io/learn/graphql/graphiql

這里的話，可以使用一些選項(xiàng)的配置，幫助我們快速直觀的理解文檔描述。查詢這樣的數(shù)據(jù)。

首先大體學(xué)習(xí)一哈：
這里有個(gè)特別好的地方就是有Authorization的認(rèn)證，這時(shí)候就得按照人家的要求來(lái)寫了。那就可以通過(guò)請(qǐng)求攔截器來(lái)加上這個(gè)認(rèn)證即可。所以這里的兩個(gè)錯(cuò)誤處理就特別的好了。

在這里插入圖片描述

所以就是和配置axios一樣，先來(lái)配置好這個(gè)二次封裝的（Graphql）：

import ApolloClient from 'apollo-boost';
import store from '@/store';

const apolloClient = new ApolloClient({
  uri: 'https://hasura.io/learn/graphql',
  fetchOptions: {
    credentials: 'include',//是否包含憑證
  },
  request:(operation)=>{    
    operation.setContext({
      headers:{
        Authorization:"Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik9FWTJSVGM1UlVOR05qSXhSRUV5TURJNFFUWXdNekZETWtReU1EQXdSVUV4UVVRM05EazFNQSJ9.eyJodHRwczovL2hhc3VyYS5pby9qd3QvY2xhaW1zIjp7IngtaGFzdXJhLWRlZmF1bHQtcm9sZSI6InVzZXIiLCJ4LWhhc3VyYS1hbGxvd2VkLXJvbGVzIjpbInVzZXIiXSwieC1oYXN1cmEtdXNlci1pZCI6ImF1dGgwfDY0MGZkYTc1MjE5MjBmOGQzNDJiODA0YiJ9LCJuaWNrbmFtZSI6IjIzNjgyMzU1NDQiLCJuYW1lIjoiMjM2ODIzNTU0NEBxcS5jb20iLCJwaWN0dXJlIjoiaHR0cHM6Ly9zLmdyYXZhdGFyLmNvbS9hdmF0YXIvODA2YmJhMzNjYjUxNzg2MmE2M2UwMDAwM2Q4ZmIwZTc_cz00ODAmcj1wZyZkPWh0dHBzJTNBJTJGJTJGY2RuLmF1dGgwLmNvbSUyRmF2YXRhcnMlMkYyMy5wbmciLCJ1cGRhdGVkX2F0IjoiMjAyMy0wMy0yMVQwODozOTozNC43MTBaIiwiaXNzIjoiaHR0cHM6Ly9ncmFwaHFsLXR1dG9yaWFscy5hdXRoMC5jb20vIiwiYXVkIjoiUDM4cW5GbzFsRkFRSnJ6a3VuLS13RXpxbGpWTkdjV1ciLCJpYXQiOjE2NzkzODc5NzUsImV4cCI6MTY3OTQyMzk3NSwic3ViIjoiYXV0aDB8NjQwZmRhNzUyMTkyMGY4ZDM0MmI4MDRiIiwiYXRfaGFzaCI6IkpFZHZ0RFc1dnlhdnZ0TjNXZDliWXciLCJzaWQiOiJwT0l1Z2lWc1U1dTRNMGdMMHZmNWVZOTFnRi1Ma3hEQiIsIm5vbmNlIjoiQXFrSGRteURLaVFST3BZaWFmcTVlUXlLNW9pSH5KS3kifQ.A3LKFKBF0QFaNXPfUjr3ku8seevODVagp1hRkBN8SDN_m4zmvbNg1YOvZWwyQwHrRMZBadmM3WkQ4wkJBDO9YbWSrqh2XCeTNpRYMkcZ07_8gyUx77WKoXHSRoe3tZJjvBTgVleyJTHqYET-aI46pi7mamuZq7BuAHPZ-uKKBmErrhNGhari_X_Le9tNjJPfTGNuGovsXW3hK_TYiRC1eL5Ic_ekO0UDey9ph2qA05JJdJPwN2ZqFhwRQ3Cgdn0kIUPB_dIZFn2aD_PF78jdGGyUjFEES9xd-MbNfKpphB0lknUSTIcP0SyckVLmi0WW1CawAdHZCZke6KQs5QsKWw",
        contentType:"application/json"
      }
    })
  },
  onError:({ graphQLErrors, networkError })=>{
    if (graphQLErrors) {
     console.log("graphQLErrors:",graphQLErrors[0].message);
    }
    if (networkError) {
      console.log("networkError:",networkError);
    } 
  },
})

export default apolloClient;

在代碼中使用這個(gè)接口。

import gql from 'graphql-tag'
import apolloClient from './graphql'

export function one(){
    return apolloClient.query({
      query:gql`query{
        users(limit: 5) {
          name
          id
        }
      }`
    })
}

在這里插入圖片描述