Typed document node with vue3 apollo and complex where

Question

I use this package https://github.com/dotansimha/graphql-typed-document-node and I usually call it like this useQuery(peopleDocument, variables).

But laravel lighthouse has a complex where plugin which automatically adds all types for various queries where conditions for example

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

I would like to allow users to build their own filters with their own operators but how I can define such query when filters and their operators are dynamic?

Answer 1

@xadm vague explanation somehow helped. So I'll answer my own question.

I'm unsure if it's how to should be used but it does work.

Lighthouse generates operators and columns enums automatically with @whereConditions directive. So you have to run yarn graphql-codegen again to fetch them.

And then simply import then simply use them in component

Lighthouse schema definition example:

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

Query definition:

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

Vue component:

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

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