Using gql-tag-operations preset with imported fragments

[amosbastian]

I have just started a new project and am trying out the gql-tag-operations preset, which looks really great! One thing I am used to doing is colocating fragments, like so:

// Tweet.tsx
import { TweetFragmentType } from '../gql';
import { gql } from 'graphql-tag';

export const TweetFragment = gql`
  fragment TweetFragment on Tweet {
    id
    body
  }
`;

const Tweet = (props: {
  tweet: TweetFragmentType;
}) => {
  return <li data-id={props.id}>{props.body}</li>;
};

and

// Tweets.tsx
import { gql } from 'graphql-tag';
import { TweetFragment } from './Tweet';

const TweetsQuery = gql`
  query TweetsQuery {
    tweets {
      id
      ...TweetFragment
    }
  }
  ${TweetFragment}
`;

const Tweets = () => {
  ...
  return (
    <ul>
      {data.tweets.map(tweet => (
        <Tweet key={tweet.id} tweet={tweet} />
      ))}
    </ul>
  );
};

I was wondering if there is a way to do it with the gql-tag-operations preset, as I have tried a couple of things but it's not really working.

[dotansimha]

@n1ru4l any idea?

[n1ru4l]

@amosbastian This is a limitation of TypeScript. We cannot infer the type based on a tagged template literal, thus the usage of global fragment names

const TweetsQuery = gql(/* GraphQL */ `
   query TweetsQuery {
    tweets {
      id
      ...TweetFragment
    }
  }
`)

Another thing is that we cannot infer the type if there is any string interpolation going on. That means this would currently only work with global fragments. More information over here: urql-graphql/urql#1221 (comment)

In general, I would recommend using the gql exported from the generated file (at least for now). The drawback is that all fragment names must be globally unique. I personally think that is not the worst thing and until we have better TypeScript support for this it is the only way of doing things like this.

// Tweet.tsx
import { gql, DocumentType } from '../gql';

export const TweetFragment = gql(/* GraphQL */ `
  fragment TweetFragment on Tweet {
    id
    body
  }
`);

const Tweet = (props: {
  tweet: DocumentType<TweetFragment>;
}) => {
  return <li data-id={props.id}>{props.body}</li>;
};

// Tweets.tsx
import { gql } from './gql';
import { Tweet } from './Tweet';

const TweetsQuery = gql(/* GraphQL */ `
  query TweetsQuery {
    tweets {
      id
      ...TweetFragment
    }
  }
`);

const Tweets = () => {
  return (
    <ul>
      {data.tweets.map(tweet => (
        <Tweet key={tweet.id} tweet={tweet} />
      ))}
    </ul>
  );
};

---

We also started working on a PR that supports module augmentation, which would allow using an existing gql function from any library and overload those types with a generated .d.ts file. #6492

There is still a pain point which again is fragment related. If we are not using graphql-codegen for generating the actual code, but instead only generate a .d.ts file, the gql function itself must be smart enough to fill in missing fragments from a "global cache" (as using string interpolation would not allow us to infer the type), which might also be flawed in code-splitting environments (fragment is not in cache yet)... I also mentioned this over here: urql-graphql/urql#1221 (comment)

In my opinion, the best solution for addressing this right now would be to let graphql-codegen emit .d.ts files (for superb developer experience, no wiring or complicated imports), but then use a babel plugin for actually rewriting those gql tag usages to import from the complete artifact as emitted by graphql-codegen.

You write this:

// Tweets.tsx
import gql from 'gql-tag';
import { Tweet } from './Tweet';

const TweetsQuery = gql(/* GraphQL */ `
  query TweetsQuery {
    tweets {
      id
      ...TweetFragment
    }
  }
`);

Codegen emits:

// gql/index.d.ts
/* eslint-disable */
import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';

declare module 'gql-tag' {
  export default function gql(
    source: '\n  query TweetsQuery {\n    tweets {\n      id\n      ...TweetFragment\n    }\n  }\n'
  ): typeof import('./graphql').TweetsQueryDocument;
  export default function gql(
    source: '\n  fragment TweetFragment on Tweet {\n    id\n    body\n  }\n'
  ): typeof import('./graphql').TweetFragmentDoc;
  export default function gql(source: string): unknown;
}

----babel transform what you have written into---->

// Tweets.tsx
import { TweetsQueryDocument } from "./gql/graphql.ts"
import { Tweet } from './Tweet';

const TweetsQuery = TweetsQueryDocument 

[amosbastian]

I've tried doing what you suggested before, but I always get the following error when the fragment is not in the same file as the query

AggregateError: GraphQL Document Validation failed with 1 errors;
      Error 0: GraphQLDocumentError: Unknown fragment "TweetFragment".

[n1ru4l]

Seems like a untested case 🤔 I will have a look at this next week!

[n1ru4l]

@amosbastian Hey sorry, I should have asked this immediately. 😓 Can you please create a reproduction code sandbox and share it with me?

[amosbastian]

@n1ru4l embarrassingly to say when I was setting up a reproduction I realised that I'm just dumb and had my codegen.yml set up wrong (documents glob) 😅... anyway, thanks again for your time and the package, it really is great.