Type mismatch between useQuery params and and gql TypedDocument

[sslotsky]

I am following the README to construct a query, but the type that's returned by gql from @urql/core does not seem to match the type that's expected bu useQuery. I hope I'm just holding it wrong?

It seems useQuery wants an extension of TypedDocumentNode that includes an extra kind property:

export declare const useQuery: <Variables extends AnyVariables, Data = any>(
  query: TypedDocumentNode<Data, Variables> & {
    kind: string;
  },

But the gql function just returns a TypedDocument so TypeScript will not compile this code:

import {
  $,
  component$,
  useContext,
  useStylesScoped$,
} from '@builder.io/qwik';
import { gql } from '@urql/core';
import { useQuery } from 'qwik-urql';
import styles from './cart.css?inline';
import { CartContext } from '../cart-provider/cart-provider';

export const query = gql`
  query Products {
    products {
      totalItems
      items {
        id
        name
        slug
        description
      }
    }
  }
`;

export const Query = $(() => query);

export const Cart = component$(() => {
  useStylesScoped$(styles);
  const state = useContext(CartContext);
  const query = useQuery(Query, {}, { requestPolicy: 'network-only' } );

The error message that I see is:

Argument of type 'QRL<() => TypedDocumentNode<any, AnyVariables>>' is not assignable to parameter of type 'TypedDocumentNode<any, {}> & { kind: string; }'.
  Type 'QRL<() => TypedDocumentNode<any, AnyVariables>>' is missing the following properties from type 'TypedDocumentNode<any, {}>': kind, definitionsts(2345)

[Dindaleon]

Yeah, I am getting the same error. Did you fix it?

[DustinJSilk]

Hmm interesting, If I remember correctly I had to change the types because qwik wont let us serialise enums, but the enum is a string so it should still work.

I’ve been away for a few weeks so haven’t had time to look at this.

I want to test the new server actions api and see if that changes how best to use GraphQL with Qwik since Qwik does some nice prefetching and caching of its own. The old onGet API was difficult to use with Urql. I will need to first explore the updates before making any fixes as it may require a lot of changes

[Dindaleon]

to test the new server actions api and see if that changes how best to use GraphQL with Qwik sin

for some odd reason when I do npm install qwik-urql I get the wrong file for the useQuery function. To make it work, I have to download the repository, and paste the files into my project.

[intellix]

I'm now getting this error:

No exchange has handled operations of kind "query". Check whether you've added an exchange responsible for these operations.

and if I go here, it suggests that you should update uqrl to the latest version to get kind (and de-dupe versions): https://github.com/urql-graphql/urql/discussions/1160

I think this library just needs updating cause it's ancient now.