logaretm / villus

I really like the possibility to use TypedDocumentNode from the GraphQL Code Generator in queries. But unfortunately, it doesn't seem to work as presented here in the docs (at least not with useSubscription which is what I need):

https://villus.logaretm.com/guide/typescript-codgen#using-typed-document

The problem seems to be that the normalizeQuery call comes too late in execute<TData, TVars>. It is called only in the getQueryKey function, but the normalized query value (using print from the graphql package) is needed in the first ...operation property (= query and values) already.

villus/packages/villus/src/client.ts

Line 48 in 4522450

private async execute<TData, TVars>(

 const context: ClientPluginContext = {
      useResult(pluginResult, terminate) {
        if (terminate) {
          terminateSignal = true;
        }

        result = pluginResult as OperationResult<TData>;
      },
      afterQuery(cb) {
        afterQuery.push(cb);
      },
      operation: {
        ...operation,
        key: getQueryKey(operation),
        type,
        cachePolicy:
          ('cachePolicy' in operation ? operation.cachePolicy : this.defaultCachePolicy) || this.defaultCachePolicy,
      },
      opContext,
    };

I tested to insert

operation.query = normalizeQuery(operation.query);

somewhere before creating const context. Then everything works. Of course, you wouldn't need to call normalizeQuery again in getQueryKey then, but simply pass along the value from above.

Turns out my solution above was wrong. The issue was rather that the provided variables were not passed along in the message.

I simply had to insert variables: operation.variables in the subscriptionForwarder for graphql-ws:

const subscriptionForwarder = operation => {
  return {
    subscribe: obs => {
      wsClient.subscribe(
        {
          query: operation.query,
          variables: operation.variables,
        },
        obs
      );
    },
  };
};

Would be great if this could be mentioned in the docs here:

https://villus.logaretm.com/guide/subscriptions

TypedDocumentNode not working with useSubscription