摸索graphQL在前端vue中使用过程(四)

news2024/12/26 23:41:10

请求网址https://hasura.io/learn/graphql,他这个Authorization好像每天就会一次变化,需要注意。
在这里插入图片描述
之前用到了一种类型ID,也就是说,在GraphQL的查询标量的过程中。
标量:就是被查询的字段名称。
这里再补充一点知识,统一一下概念。
GraphQL 自带一组默认标量类型

  • Int:有符号 32 位整数。
  • Float:有符号双精度浮点值。
  • String:UTF‐8 字符序列。
  • Boolean:true 或者 false。
  • ID:ID 标量类型表示一个唯一标识符,通常用以重新获取对象或者作为缓存中的键。ID 类型使用和 String 一样的方式序列化;然而将其定义为 ID 意味着可能并不需要人类可读型。当前只是可能,就像我之前的用的ID类型,还是具有一定的可读性。
    GraphQL 也可以自定义一个标量的标量类型

例如:我们可以定义一个 Date 类型:scalar Date

枚举类型:枚举类型是一种特殊的标量,它限制在一个特殊的可选值集合内

  • 这里说的比较难以理解,我认为他就是一种可查询范围的数据集合,我后面接着验证。

列表和非空(Lists and Non-Null)以及联合类型

  • 对象类型、标量以及枚举是 GraphQL 中你唯一可以定义的类型种类

  • 但是你在查询变量声明处使用时,你可以给它们应用额外的类型修饰符来影响这些值的验证.

  • 此处我们使用了一个 String 类型,并通过在类型名后面添加一个感叹号!将其标注为非空。这表示我们的服务器对于这个字段,总是会返回一个非空值,如果它结果得到了一个空值,那么事实上将会触发一个 GraphQL 执行错误,以让客户端知道发生了错误。
    在这里插入图片描述
    非空和列表修饰符可以组合使用。例如你可以要求一个非空字符串的数组.

    myField: [String!]这表示数组本身可以为空,但是其不能有任何空值成员。
    我们来定义一个不可为空的字符串数组myField: [String]!
    这表示数组本身不能为空,但是其可以包含空值成员.

在代码中的使用

定义

export function two(params){
  return apolloClient.query({
    query:gql`
      #查询语句
      query($todosnum:Int){
        todos(limit:$todosnum){
          ...con
        }
      },
      #代码片段
      fragment con on todos {
        user {
          id
          name
        }
      }`,
    variables:params
  })
}

使用

two({todosnum: 3}).then(res=>{
  console.log(res);
}).catch((err=>{
  console.log(err);
}))

以上query__root学习完毕
接下来学习mutation


查询和变更类型(The Query and Mutation Types)

schema 中大部分的类型都是普通对象类型,但是一个 schema 内有两个特殊类型:

schema {
  query: Query
  mutation: Mutation
}

每一个 GraphQL 服务都有一个 query 类型,可能有一个 mutation 类型。这两个类型和常规对象类型无差,但是它们之所以特殊,是因为它们定义了每一个 GraphQL 查询的入口。因此如果你看到一个像这样的查询:
在这里插入图片描述
那表示这个 GraphQL 服务需要一个 Query 类型,且其上有 hero 和 droid 字段:

type Query {
  hero(episode: Episode): Character
  droid(id: ID!): Droid
}

变更也是类似的工作方式 —— 你在 Mutation 类型上定义一些字段,然后这些字段将作为 mutation 根字段使用,接着你就能在你的查询中调用。
**有必要记住的是,除了作为 schema 的入口,Query 和 Mutation 类型与其它 GraphQL 对象类型别无二致,它们的字段也是一样的工作方式。**也就是按照正常的类型去查询,但是query关键字变为mutation

  • 这里引入一个新的概念。
  • 输入类型(Input Types)上面可以。但是你也能很容易地传递复杂对象。这在变更(mutation)中特别有用,因为有时候你需要传递一整个对象作为新建对象。

在这里插入图片描述
确实从语法和前端模型的体验上这个和query没有太多的区别。只是代表的意义不一样。

定义:
①插入Graphql模型。

export function three(params){
  return apolloClient.mutate({
    mutation:gql`
      #查询语句
      mutation($title:String,$is_public:Boolean) {
        insert_todos_one(object: {is_public:$is_public , title: $title}) {
          title
          id
        }
      }`,
    variables:params
  })
}

使用:

three({title: "阿牛",is_public:false}).then(res=>{
  console.log(res);
}).catch((err=>{
  console.log(err);
}))

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/784168.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android 包体积资源优化实践

1 插件优化 插件优化资源在得物App最新版本上收益12MB。插件优化的日志在包体积平台有具体的展示,也是为了提供一个资源问题追溯的能力。 1.1 插件环境配置 插件首先会初始化环境配置,如果机器上未安装运行环境则会去oss下载对应的可执行文件。 1.2 图…

Windows 在VMware16.x安装Win11系统详细教程

文章目录 一、准备二、创建虚拟机1. 创建新的虚拟机2. 选择虚拟机硬件兼容性3. 安装客户机操作系统4. 选择客户机操作系统5. 命名虚拟机6. 固件类型7. 处理器配置8. 此虚拟机内存9. 网络类型10. 选择I/O控制器类型11. 选择磁盘类型12. 选择磁盘13. 指定磁盘容量14. 指定磁盘文件…

【深度学习】日常笔记15

训练集和测试集并不来⾃同⼀个分布。这就是所谓的分布偏移。 真实⻛险是从真实分布中抽取的所有数据的总体损失的预期,然⽽,这个数据总体通常是⽆法获得的。计算真实风险公式如下: 为概率密度函数 经验⻛险是训练数据的平均损失,⽤…

python机器学习(四)线性代数回顾、多元线性回归、多项式回归、标准方程法求解、线性回归案例

回顾线性代数 矩阵 矩阵可以理解为二维数组的另一种表现形式。A矩阵为三行两列的矩阵,B矩阵为两行三列的矩阵,可以通过下标来获取矩阵的元素,下标默认都是从0开始的。 A i j : A_{ij}: Aij​:表示第 i i i行,第 j j j列的元素。…

N位分频器的实现

N位分频器的实现 一、 目的 使用verilog实现n位的分频器,可以是偶数,也可以是奇数 二、 原理 FPGA中n位分频器的工作原理可以简要概括为: 分频器的作用是将输入时钟频率分频,输出低于输入时钟频率的时钟信号。n位分频器可以将输入时钟频率分频2^n倍…

linux进阶-I.MX 6ULL

目录 启动模式(8引脚设置启动模式) 对应原理图 boot ROM程序 空偏移 映像向量表(Image vector table,IVT) IVT结构体 Boot data DCD(外设寄存器配置信息,初始化关键外设) NXP…

如何使用 After Effects 导出摄像机跟踪数据到 3ds Max

推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 在本教程中,我将展示如何在After Effects中跟踪实景场景,然后将相机数据导出到3ds Max。 1. 项目设置 步骤 1 打开“后效”。 打开后效果 步骤 2 转到合成>新合成以创建新合…

Docker Compose(九)

一、背景: 对于现代应用来说,大多数都是通过很多的微服务互相协同组成一个完整的应用。例如,订单管理、用户管理、品类管理、缓存服务、数据库服务等,他们构成了一个电商平台的应用。而部署和管理大量的服务容器是一件非常繁琐的事…

【图像处理】使用自动编码器进行图像降噪(改进版)

阿里雷扎凯沙瓦尔兹 一、说明 自动编码器是一种学习压缩和重建输入数据的神经网络。它由一个将数据压缩为低维表示的编码器和一个从压缩表示中重建原始数据的解码器组成。该模型使用无监督学习进行训练,旨在最小化输入和重建输出之间的差异。自动编码器可用于降维、…

宋浩线性代数笔记(二)矩阵及其性质

更新线性代数第二章——矩阵,本章为线代学科最核心的一章,知识点多而杂碎,务必仔细学习。 重难点在于: 1.矩阵的乘法运算 2.逆矩阵、伴随矩阵的求解 3.矩阵的初等变换 4.矩阵的秩 (去年写的字,属实有点ugl…

Android 之 Canvas API 详解 (Part 2) 剪切方法合集

本节引言: 本节继续带来Android绘图系列详解之Canvas API详解(Part 2),今天要讲解的是Canvas 中的ClipXxx方法族!我们可以看到文档中给我们提供的Clip方法有三种类型: clipPath( ),clipRect( ),clipRegion(…

Mybatis的基本操作--增删改查

目录 查看数据 无参数 一个参数 多个参数 添加数据 修改数据 删除数据 查看数据 分三种情况:无参,有一个参数,有多个参数的情况。 (这里的详细操作步骤是博主的上一篇博客写的:初识Mybatis,并创建第…

2023年VSCode插件最新推荐(54款)

本文介绍前端开发领域常用的一些VSCode插件,插件是VSCode最重要的组成部分之一,本文列出了我自己在以往工作经验中积累的54款插件,个人觉得这些插件是有用或有趣的,根据它们的作用,我粗略的把它们分成了代码管理、文本…

css实现纹理条纹,波点背景效果

css实现纹理条纹,波点背景效果 本文目录 css实现纹理条纹,波点背景效果效果一:水平条纹效果二:竖向条纹效果三:斜条纹效果四:网格效果五:象棋盘1效果六:象棋盘2效果七:红…

代码重构的时机与方法

🐱 个人主页:不叫猫先生,公众号:前端舵手 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步…

机器人制作开源方案 | 智能垃圾桶

1. 功能说明 智能垃圾桶是一种利用物联网技术和智能感知能力的智能设备,旨在提高垃圾分类和处理的效率。通常具备以下特点和功能: ① 智能感知:智能垃圾桶配备各种传感器,如压力传感器、红外线传感器等,可以实时感知…

Flutter实现点击头像更新头像的功能,本地相册选取和调用相机两种方式的实现

文章目录 需求实现的效果如图代码实现代码分析用InkWell包住了我们的头像,这样来监听点击头像的事件用showDialog弹出提示框让用户选择是从相册里选择头像还是使用相机来拍照用image_picker实现从设备的相册或相机中选择图片或拍照 需求 Flutter实现点击头像更新头…

数字孪生管控系统,智慧园区楼宇合集

智慧园区是指将物联网、大数据、人工智能等技术应用于传统建筑和基础设施,以实现对园区的全面监控、管理和服务的一种建筑形态。通过将园区内设备、设施和系统联网,实现数据的传输、共享和响应,提高园区的管理效率和运营效益,为居…

【java】【基础8】入门结业-ATM系统实战

目录 一、ATM项目技术 二、能达成的能力 三、开始编码 3.1 系统架构搭建、欢迎页设计 3.1.1 Account 3.1.2 ATM 3.1.3 Test 3.2 开户功能实现 3.2.1 修改AccountgetUserName() 3.2.2 ATM 开户操作 3.2.3 ATM为新用户生成一个随机卡号​编辑 3.3 登录功能实现 3.4 操作页…