首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果输入变量为空,则阻止vue-apollo中的graphql查询

在Vue.js中使用vue-apollo进行GraphQL查询时,如果输入变量为空,可以通过以下方式阻止查询:

  1. 在Vue组件中使用条件语句判断输入变量是否为空,然后决定是否发起GraphQL查询。例如:
代码语言:txt
复制
import { gql } from 'apollo-boost';
import { ApolloQuery } from 'vue-apollo';

export default {
  name: 'MyComponent',
  apollo: {
    myQuery: {
      query: gql`
        query MyQuery($input: String!) {
          // GraphQL查询语句
        }
      `,
      variables() {
        if (this.input) {
          return { input: this.input };
        }
        // 如果输入变量为空,则返回空对象,阻止查询
        return {};
      },
    },
  },
  data() {
    return {
      input: '',
    };
  },
};

在上述代码中,variables方法会根据input的值返回相应的变量对象。如果input为空,则返回空对象,从而阻止查询。

  1. 可以使用watch属性监听input变量的变化,在变量为空时取消查询。例如:
代码语言:txt
复制
import { gql } from 'apollo-boost';
import { ApolloQuery } from 'vue-apollo';

export default {
  name: 'MyComponent',
  apollo: {
    myQuery: {
      query: gql`
        query MyQuery($input: String!) {
          // GraphQL查询语句
        }
      `,
      variables() {
        return { input: this.input };
      },
    },
  },
  data() {
    return {
      input: '',
    };
  },
  watch: {
    input(newInput) {
      if (!newInput) {
        this.$apollo.queries.myQuery.skip = true; // 取消查询
      } else {
        this.$apollo.queries.myQuery.skip = false; // 恢复查询
      }
    },
  },
};

在上述代码中,通过监听input变量的变化,当input为空时,将skip属性设置为true,从而取消查询。当input有值时,将skip属性设置为false,恢复查询。

这样,无论是通过条件语句还是监听变量变化,都可以在输入变量为空时阻止vue-apollo中的GraphQL查询。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • GraphQL+Koa2实现服务端API结合Apollo+Vue

    GraphQL 对你 API 数据提供了一套易于理解完整描述,使得客户端能够准确地获得它需要数据,而且 没有任何冗余。...从这个意义上说,它是数据库无关, 而且可以在使用 API 任何环境中有效使用,我们可以理解 GraphQL 是基于 API 之上一 层封装,目的是为了更好,更灵活适用于业务需求变化 GraphQL...查询返回结果就是输 入查询结构精确映射 客户端可以自定义 Api 聚合 如果设计数据结构是从属,直接就能在查询语句中指定;即使数据结构是独 立,也可以在查询语句中指定上下文,只需要一次网络请求...将它与vue-apollographql一起安装: npm install vue-apollo graphql apollo-boost --save 在src/main.js引入apollo-boost...' }) 可以打开 http://118.123.14.36:3002/graphql 在控制台查看查询结果 在src/main.js配置vue-apollo插件 import VueApollofrom'vue-apollo

    5.2K42

    Go GraphQL 教程

    表示非 接口:interface 联合类型: | 通过对象类型组合而成 输入类型: 解决传递复杂参数问题 讲了这么些,其实最好方式还是亲自调用下接口,参照着官方文档,按个调用尝试下,熟悉这套语法规范...{ "name": "2019-daily", "createdAt": "2019-01-11T15:17:43Z" } } } } # 如果变量...: { "Repository": "2019-daily", "Has": true } # 结果 { "data": { "AliasForViewer": {...表示非 对象类型:type 关键字 枚举类型:enum 关键字 输入类型:input 关键字 举一个具体示例:小程序: 腾讯投票 首页 image 详情 image...deadline: Time class: VoteClass } type Options { name: String } # 输入类型: 一般用户更改资源输入是列表对象,完成复杂任务

    4.4K20

    GraphQL 基础实践

    变量定义:在 GraphQL ,声明一个变量使用符号开头,冒号后面紧跟着变量传入类型。如果要使用变量,直接引用即可,例如上面的 movie 就可以改写成 movie(name: name)。...在 GraphQL ,只有一个 API 端点,同样也接受 GET 和 POST 动词,如要操作 mutation 使用 POST 请求。...在上面的 Schema ,后面紧跟着感叹号声明了此类型是个不可类型(Non-Nullable),在参数声明表示该参数不能传入。...如果感叹号跟在 field 后面,表示返回该 type 数据时,此字段一定不为。 通过上面的类型定义,可以看到 GraphQL 类型系统起到了很重要角色。...看到 Schema 定义,COMEDY是枚举类型MovieTypes枚举成员。枚举类型用于声明一组取值常量列表,如果声明了某个参数某个枚举类型,那么该参数只能传入该枚举类型内限定常量名。

    12.8K20

    GraphQL】225-GraphQL真香入门教程

    前端页面请求 然后给 index.html 添加按钮和事件绑定: 这里变量 query 是个字符串类型,定义查询条件,在条件 GetSuperHero 参数,需要用 $ 符号来标识,并在实际查询...注意点 请求 query 参数需要对照好有 $ 符号变量。...字段形参是自定义类型,类型需要用 input 标识: const schema = buildSchema(` # 输入类型 用 input 标识 input HeroInput...属性上 属性定义 定义在类型后,键值对形式 定义在参数对象 fields 属性,值对象,每个属性名为键名,值也是对象,其中 type属性 graphql 属性,下面会补充 补充: fields...查询类型用 type ,输入类型用 input。 其实 GraphQL 还是很简单好用呢~~~

    8.1K21

    干货 | 携程基于 GraphQL 前端 BFF 服务开发实践

    因此,在 GraphQL 服务如果包含很多 CPU 密集任务,其服务能力很容易受到 GraphQL Query 可变查询复杂度影响,而变得难以预测。...由于非类型字段不能为,字段错误被传播到父字段处理。如果父字段可能是null,那么它就会解析null,否则,如果它是一个非null类型,字段错误会进一步传播到它父字段。...这也是符合我们编写 GraphQL Schema 类型约束如果只有 Grandchild  value  null,反而不符合类型,因为该节点是带 ! 类型。...: ProductInfo }` 如上,对一个节点提供一个 json 查询字段,它将返回原节点全部内容,同时框架里对最终 response 进行处理,如果碰到了 json 字段对其解构,同时删除...GQL 内会分别执行上述 resolve,如果是调用 API,调用是并行

    2.6K20

    GraphQL真香入门教程

    自定义类型查询 我们前面的查询,已经将 hero 字段定义 String 类型,但是常常开发,我们又会碰到字段是多个类型,即字段也能指代对象类型(Object),比如一个 user 字段会有 name...前端页面请求 然后给 index.html 添加按钮和事件绑定: 这里变量 query 是个字符串类型,定义查询条件,在条件 GetSuperHero 参数,需要用 $ 符号来标识,并在实际查询...注意点 请求 query 参数需要对照好有 $ 符号变量。...) 里类型 $heroName heroName ; 变量 variables heroName 属性; 这三个名称需要一样。...字段形参是自定义类型,类型需要用 input 标识: const schema = buildSchema(` # 输入类型 用 input 标识 input HeroInput

    7.2K30

    防止你GraphQL API被恶意查询

    在这篇文章,他描述了他们是如何在攻击中保护GraphQL API。 使用GraphQL,你可以随时查询想要内容。 这对于使用API来说是惊人,但也具有复杂安全隐患。 ...不幸是,它还有两个主要折衷: 1、我们永远不能更改或删除查询,只能添加新查询如果任何用户运行过时客户端,我们不能阻止他们请求。 ...我们检查了我们客户端,我们使用最深查询有7个级别,所以我们使用了(相当宽松)最大深度10值,并将其添加到我们验证规则: app.use('/api', graphqlServer({   ...为了防止这种情况,我们需要分析查询,然后再运行它们来计算它们复杂性,如果它们太耗时,则会阻止它。虽然这比我们以前两项保护措施都要做得更好,但它可以确保没有恶意查询可以到达我们解决方案。...它也有乘法支持,所以如果你要求列表任何嵌套字段将乘以分页数量,这是非常整洁。

    1.8K10

    何为GraphQL

    GraphQL是一种新型,令人兴奋,用于特定查询和操作API。它非常灵活并且有很多好处。 它特别适合以图形和树型组织数据。...在此篇教程你将学到: GraphQL原理 它如何与REST进行比较 如何设计数据模式 如何配置一个GraphQL服务器 如何实现查询和变动 和一些额外高级主题 ? GraphQL亮点在哪里?...在allPlayers查询情况下,它可以返回一个列表,但不能为值。 此外,这意味着列表球员也不能为值(因为它也有一个感叹号)。 ? 设置GraphQL服务器 ?...凯文杜兰特在勇士队仅赢得了一次总冠军,勇士队总共赢得了五次总冠军。 ? GraphQL变动 ? 魔术师约翰逊肯定是赛场上魔术师。 但是如果没有他朋友卡里姆·阿卜杜勒·贾巴尔,他是无法成功。...验证 GraphQL将针对模式验证每个查询或变动。 当输入数据具有复杂形态时,这会是一个巨大胜利。 您不必编写烦人且脆弱验证代码。 GraphQL将为您处理它。 ?

    3.5K60

    为什么我使用 GraphQL 而放弃 REST API?

    如果 API 是版本化,旧 API URL /API/v1,新版本 URL /API/v2,那么你可能做得很好。...如此多乐趣!举例来说,如果没有恰当验证且存在未初始化变量,你就很容易地得到类似这样东西:/todos?offset=undefined。...此模式其他变体和查询也是如此:对输入进行类型检查和验证,并且基于查询GraphQL 服务器知道期望结果形状。...如果使用一些现成 GraphQL->数据库查询翻译库,你甚至不需要在服务器上编写大多数数据库查询。...客户端库可以很容易地将 GraphQL 响应自动解包所需类型对象实例,因为从模式和查询可以提前知道响应形状。 GraphQL 是个时髦东西,是一种时尚,对吗?

    2.3K30

    如何优雅地扩展GraphQL系统能力

    作者 | 杜艮魁 编辑 | 蔡芳芳 1 背景 为什么要扩展 GraphQL 系统能力 GraphQL 可将 API 表示数据通过解析函数映射到 GraphQL schema API...原生 GraphQL 查询获取基础数据提供了便捷,但是计算能力不足导致其结果经常不能满足业务需求,数据往往需要加工转换、甚至经过多次编排查询,才能展示给用户。...例如 App 渲染数据时,低于指定版本客户端不用请求某些字段,该条件判断无法通过请求变量只有客户端版本号原生查询实现。...INPUT_FIELD_DEFINITION # 输入字段定义 GraphQL 规范并不会限制指令只能定义在可执行位或者类型系统位,但是为了明确指令是用在查询上、还是对于类型系统生效,往往只将指令生效位置限定在其中一种...GraphQL Java 库提供了基于访问者模式实现QueryVisitor ,可在其方法获取到查询字段、内联片段和片段定义上下文信息,便于实现自定义校验规则。

    1.3K20

    GraphQL 从入门到实践

    Query 开始查找,找到对象类型(Object Type)时使用它解析函数 Resolver 来获取内容,如果返回是对象类型继续使用解析函数获取内容,如果返回是标量类型(Scalar Type...age: Int } 这个 User 对象类型有两个字段,name 字段是一个 String 标量,age 字段一个 Int 标量。...} } Hello world 总是如此愉快,下面我们来进行稍微复杂一点查询 查询入口 users 查找所有用户列表,返回一个不可但长度可以为 0 数组,数组如果有元素,必须 User 类型...;另一个查询入口 user 接受一个字符串,查找 ID 这个字符串用户,并返回一个 User 类型字段 # src/schema.graphql # Query 入口 type Query...---- 网上帖子大多深浅不一,甚至有些前后矛盾,在下文章都是学习过程总结,如果发现错误,欢迎留言指出~ 参考: GraphQL | 一种 API 而生查询语言 JSON-RPC

    2.5K31

    零基础入门:如何在 Postman 轻松上手 GraphQL 技术

    GraphQL 是一种用于API开源数据查询和操作语言,用于API查询语言和运行时。它使客户端能够精确地指定其数据需求,并获得预测性地结果。GraphQL旨在提高API效率、灵活性和可靠性。...图片在Body中发送GraphQL查询1、在Postman创建一个新请求,在地址字段输入GraphQL端点URL。2、从请求方法下拉列表中选择POST。...3、在Body选项卡下,选择GraphQL主体类型。4、在查询编辑器输入GraphQL查询。...图片使用变量您可以创建一个JSON格式模式,变量赋值,可以避免在查询字符串输入参数。...修改“QUERY”部分body以动态分配变量值,编辑“GRAPHQL VARIABLES”部分,使用我们希望将变量设置内容。

    94810

    基于 actix、async-graphql、rbatis、pgsqlmysql 构建 GraphQL 服务(4)-变更服务

    前 3 篇文章,我们初始化搭建了工程结构,选择了必须 crate,并成功构建了 GraphQL 查询服务,以及对代码进行了第一次重构。...定义 NewUser 输入对象类型 在此,我们定义一个欲插入 users 集合结构体,包含对应字段即可,其为 async-graphql 输入对象类型。...因为我们已经设定 email 用户唯一性标志属性,因此直接使用 get_user_by_email 查询已经插入用户即可。...如果配置未跟随教程,请根据你配置输入正确链接,详见你 .env 文件配置项。...正常启动后,如果你此时通过 graphiql/playgound 界面的 docs 选项卡查看,将看到查询和变更服务列表都有了变化。

    1.2K30

    基于React和GraphQL黛梦设计与实现

    先定义用户实体和相应接口,不做细节实现,访问相应接口能返回相应预期 定义一个全局变量(或者写进一个文件)去模仿数据库操作,返回相应结果 结合数据库去实现细节,访问相应接口能返回相应预期 全局变量..., user: UserInput): User } `); 这里定义了用户输入类型以及用户类型,然后QuerygetUsers模拟是返回用户列表接口,返回User实体列表集。...'); }); 这里跟全局变量不同是,我这边对所有字段和方法增加了相应注释(GraphQL就是好, 接口即文档),然后封装了mysql数据库操作方法,引入后去实现相关接口。...实际上在开发,我们往往会采用社区一些成熟技术栈,比如你需要进一步了解GraphQL,可以去了解下Apollo这个库。...那么前后端架构就可以是 react-apollo,vue-apollo, 后端的话比如express-apollo,koa-apollo等等。

    1.8K20

    如何在纯 JavaScript 中使用 GraphQL

    这是因为许多教程和示例代码似乎都基于这样一个假设,也就是说如果你在使用 GraphQL,就需要使用这些库。 但是,一个对 GraphQL API 查询只不过是一个定制格式 HTTP 请求而已。...例如,如果查询需要一个变量 id(将在查询显示 $id),则需要按以下方式发送变量: { "id":1 } operationName 也是可选。...当查询包含多个命名操作查询时,它用于指定要运行操作。 如果你将一个 GraphQL 作为一个 GET 请求发送,则需要将以上内容作为查询参数传递。...传递变量 在此示例,我们查询具有一个需要传递变量($id)。为了传递这个变量,我们需要将变量值添加到请求正文中包含数据里。...更好解决方案是调用一个可访问这些凭据无服务器函数,然后为你调用 API 并返回结果。如果无服务器函数是用 JavaScript 编写前面示例 Node 代码就会起作用。

    3.5K10
    领券