脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → graphQL vue使用

graphQL在前端vue中使用实例代码

 更新时间：2023年03月24日 14:42:37   作者：勇敢*牛牛  
这篇文章主要介绍了graphQL在前端vue中使用过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

上回说到，那个请求拦截的一个过程，我上次不会看官网教程，这次，终于有了新的发现。

之前介绍过vue中使用GraphQL的实例代码，喜欢的朋友可以点击查看。

graphQL的interceptors（请求拦截器）

import ApolloClient from 'apollo-boost';


const apolloClient = new ApolloClient({
  // 你需要在这里使用绝对路径
  uri: 'https://countries.trevorblades.com/',
  // headers:{"Authorization":"Basic aW5zaWdodHM6MTIz","content-type":"application/json"},
  request:(operation)=>{
    // 继续上次的探索之旅，每次请求之前执行这样的代码
    console.log("before=>",operation);
    // 每次请求都会执行这个拦截器,可以设置请求头
    operation.setContext({
      headers:{
        Authorization:"Basic aW5zaWdodHM6MTIz"
      }
    })
    console.log("after=>",operation.getContext().headers);
  },
  onError:(e)=>{
    // 失败错误信息打印
    console.log("err=>",e)
  },
  clientState:{
    
  },
})

export default apolloClient;

错误处理

如果请求失败，这里的情况也会分为两种。
第一，可能是graphql的语法错误导致的请求。
第二，可能是networkError导致的错误，语法错误。

const apolloClient = new ApolloClient({
  // 你需要在这里使用绝对路径
  uri: 'https://countries.trevorblades.com/',
  // 请求选项
  fetchOptions: {
    credentials: 'include',//是否包含凭证
  },
  request:(operation)=>{
    operation.setContext({
      headers:{
        Authorization:"Basic aW5zaWdodHM6MTIz",
        contentType:"application/json"
      }
    })
  },
  onError:({ graphQLErrors, networkError })=>{
    if (graphQLErrors) {
     console.log("graphQLErrors");// 失败错误信息打印
    }
    if (networkError) {
      console.log("networkError");
    }
    
  },
  clientState:{
    
  },
})

因为网速问题，我就暂时的探索到这儿。
前几天的网络出现了问题，然后发现我前端作为学习的这个https://countries.trevorblades.com/地址，出现了变化，也就是UI界面人家可能重新采用了一个。

在这里插入图片描述

变成了这种效果，可能是我网络这边有问题，请求的时候有点延迟。
然后好像对部分请求类型做了补充和优化。

前面学习了graphql的概念，graphql的部分语法，以及基础查询，带参数的查询，拦截器用法，错误处理。接下来深入学习一下，上传json字符串，和如何去上传和请求流式文件并转化。

目前为止，我们只讨论过简单的字符串等标量值作为参数传递给字段，但是你也能很容易地传递复杂对象。这在变更（mutation）中特别有用，因为有时候你需要传递一整个对象作为新建对象。在 GraphQL schema language 中，输入对象看上去和常规对象一模一样，除了关键字是 input 而不是 type。

为了方便演示学习，我又找了一个graphql的接口
https://hasura.io/learn/graphql/graphiql

这里的话，可以使用一些选项的配置，帮助我们快速直观的理解文档描述。查询这样的数据。

首先大体学习一哈：
这里有个特别好的地方就是有Authorization的认证，这时候就得按照人家的要求来写了。那就可以通过请求拦截器来加上这个认证即可。所以这里的两个错误处理就特别的好了。

在这里插入图片描述

所以就是和配置axios一样，先来配置好这个二次封装的（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;

在代码中使用这个接口。

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

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

在这里插入图片描述

咋们的第三波的探索就此展开。。。。。。

到此这篇关于graphQL在前端vue中使用过程的文章就介绍到这了,更多相关graphQL vue使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 解决ant Design Search无法输入内容的问题

    解决ant Design Search无法输入内容的问题

    这篇文章主要介绍了解决ant Design Search无法输入内容的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 对vue生命周期的深入理解

    对vue生命周期的深入理解

    这篇文章主要给大家介绍了关于对vue生命周期的深入理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Vue中的reactive函数操作代码

    Vue中的reactive函数操作代码

    这篇文章主要介绍了Vue中的reactive函数,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程

    vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程

    在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,下面这篇文章主要给大家介绍了关于vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程,需要的朋友可以参考下
    2023-02-02
  • vue 动态表单开发方法案例详解

    vue 动态表单开发方法案例详解

    这篇文章主要介绍了vue 动态表单开发方法,结合具体案例形式详细分析了vue.js动态表单相关原理、开发步骤与实现技巧,需要的朋友可以参考下
    2019-12-12
  • 浅谈Vue-cli 命令行工具分析

    浅谈Vue-cli 命令行工具分析

    本篇文章主要介绍了浅谈Vue-cli 命令行工具分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue3 在＜script setup＞里设置组件name属性的方法

    Vue3 在＜script setup＞里设置组件name属性的方法

    这篇文章主要介绍了Vue3 在＜script setup＞里设置组件name属性的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • Vue中使用Element UI的Table组件实现嵌套表格功能

    Vue中使用Element UI的Table组件实现嵌套表格功能

    这篇文章主要介绍了Vue中使用Element UI的Table组件实现嵌套表格功能,演示如何在Vue中使用Element UI的Table组件实现嵌套表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue+eslint+vscode配置教程

    vue+eslint+vscode配置教程

    这篇文章主要介绍了vue+eslint+vscode配置教程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue3中element-plus Upload上传文件代码示例

    vue3中element-plus Upload上传文件代码示例

    这篇文章主要介绍了vue3中element-plus Upload上传文件的相关资料,在时间开发中上传文件是经常遇到的一个需求,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08

最新评论