摸索graphQL在前端vue中使用过程(三)
上回说到,那个请求拦截的一个过程,我上次不会看官网教程,这次,终于有了新的发现。
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) {nameid}}`})
}
咋们的第三波的探索就此展开。。。。。。
摸索graphQL在前端vue中使用过程(三)相关推荐
- vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
- 前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
- 前端Vue中获取本机ip地址
前端Vue中获取本机ip地址 1.打开谷歌浏览器,地址栏输入chrome://flags,进入. 2.搜索Anonymize local IPs exposed by WebRTC,将其设置为Disa ...
- vue 中插槽的三种类型
vue中的slot主要分三种 :匿名插槽,具名插槽,作用域插槽 一,匿名插槽: 语法:<slot></slot> 1.没有为插槽指定名称 2.通过slot标签可以添加匿名插槽 ...
- 前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验
目录 前言 一.正则是什么? 二.造轮子 三.轮子使用实例 总结 前言 例如:随着前端的发展,很多功能都需要在前端填写时就先校验是否填写正确,则博主写了一些校验轮子供大家使用. 一.正则是什么? 正则 ...
- 前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】
一.文章引导 #mermaid-svg-T4hDrK2dRKwjIvxP {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
- 前端Vue项目搭建过程概述
1.安装node.npm 输入 node -v ,npm -v ,出现版本号即可. 2.安装vue 即 npm install vue ,输入 vue -V 报错,找到用户根目录 D:\Users\u ...
- 解决前端vue中的Uncaught TypeError: this.Form is undefined
报错图片如下: 仔细查看,问题出在form这里 发现是因为form没有定义 在data中定义后,错误消失
- 前端vue中实现文件下载的几种方法
第一种 前端创建超链接,通过a标签向后端发送get请求,需要给a标签添加一个download属性 这种写法是创造了一个a标签,把地址写到a标签里再用js调用点击,实现访问文件地址就是下载了 代码如下: ...
最新文章
- WMI技术介绍和应用——查询文件夹信息
- 交互流程_交互装置详细创作流程全解
- 嵌入式开发基础环境搭建
- 多模块的maven项目,执行 install/deploy 指令时,排除指定module
- tableview,基本属性图片详细解释
- psp中java,PSP编程概述
- dubbo k8s 服务发现_将Dubbo微服务迁移到k8s集群环境中前的思考与落地
- W3C小组宣布:HTML5标准制定完成
- django -- url 的 命名空间
- ERP系统之比较——SAP Oracle BAAN JDE SSA
- Python del:删除对象
- ie 谷歌插件Chrome Frame
- android超大屏触摸设备,世界上最大的安卓Android平板电脑具有98英寸的屏幕
- socks5认证过程
- Linux下烧写工具DNW和USB驱动安装
- 篱笆家装宝典之六——地板板材
- Sql语句操作数据库(修改表,修改数据库)
- 保留两位小数的四舍五入
- L1-6 喝嘤料 (15 分)
- 线性代数第四章 向量组的线性相关性