使用 vue3 apollo 和复杂 where 键入文档节点

Question

我使用这个包 https://github.com/dotansimha/graphql-typed-document-node 我通常这样称呼它 useQuery(peopleDocument, variables).

但是laravel lighthouse有一个复杂的where插件，它会自动为各种查询where条件添加所有类型，例如

{ people(where: { column: AGE, operator: EQ, value: 42 }) { name } }

我希望允许用户使用自己的运算符构建自己的过滤器，但是当过滤器及其运算符是动态的时，我如何定义此类查询？

Answer 1

模糊的解释在某种程度上有所帮助。所以我会回答我自己的问题。

我不确定是否应该使用它，但它确实有效。

Lighthouse 使用@whereConditions 指令自动生成运算符和列枚举。所以你必须再次运行 yarn graphql-codegen 来获取它们。

然后简单地导入然后简单地在组件中使用它们

Lighthouse 架构定义示例：

type Query {
  contact(where: _ @whereConditions(columns: ["id", "email", "mobile"])): Contact @first
}

查询定义：

query contact($where: QueryContactWhereWhereConditions) {
  contact(where: $where) {
    id
    email
    mobile
  }
}

Vue组件：

import { ContactDocument, QueryContactWhereColumn, SqlOperator } from 'src/typed-document-nodes.ts';

useQuery(ContactDocument, {where: {column: QueryContactWhereColumn.Email, operator: SqlOperator.Like, value: '%@example.com'}})

使用 vue3 apollo 和复杂 where 键入文档节点

Typed document node with vue3 apollo and complex where

laravel

apollo

graphql

laravel-lighthouse

vuejs3