blog/unleash-the-power-of-fragments-with-graphql-codegen

[giscus[bot]]

blog/unleash-the-power-of-fragments-with-graphql-codegen

The most important parts of Relay are the concepts of building and scaling applications, let's show how you can use these patterns in your existing project, no matter what client library you are currently using.

https://the-guild.dev/blog/unleash-the-power-of-fragments-with-graphql-codegen

[sfarthin]

I cannot for the life of me figure out how I can do the enumsAsTypes: true typescript option with the client preset. How can I do this?

[n1ru4l]

See dotansimha/graphql-code-generator#8562

[sfarthin]

How do we get syntax highlighting for this API with https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql-syntax&ssr=false#overview ? graphql(`query myQuery { ... }`) doesn't have syntax highlighting , but gql`query myQuery { ... }` does.

[sfarthin]

I think [email protected] was breaking highlighting. Disregard.

[sfarthin]

I cannot figure out how to get your eslint rules to work with this setup. Is there a standalone project example I can refer to?

[dimaMachina]

graphql-eslint contain a lot of examples https://github.com/B2o5T/graphql-eslint/tree/master/examples

[sfarthin]

I've been looking through those, but I cannot seem to get them to work in my project. Here is a scaled down example I cannot seem to get to work: https://codesandbox.io/p/sandbox/confident-kilby-wj0ssg .

[ZakKa89]

This has complicated things a lot imo, typing is a hell now once you use fragments. Each time I have to use the FragmentType helper or useFragment or both. Tried to type a state variable with this, wasn't even able to figure it out. In previous versions this was much simpler by just importing the fragment type and you'd be done.

[ZakKa89]

We are using this at scale while building GraphQL Hive, and so far it has been a blessing and brought a lot of clarity to the data flow within our app.

Having that said, you can opt out if you don't like this and don't benefit from it. https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#how-to-disable-fragment-masking

Can you elaborate why you are trying to store the GraphQL result in a state variable?

Thank you for your reaction.

Sure I can elaborate, but isn't it a very typical use case to copy data into state?

I have a use case where I'm fetching products, and the user has to select a product. I need to show the selected product in the UI to the user. (I could of course also only grab the id, and find the correct one based on that).

See my question, and more feedback here regarding the use case:
dotansimha/graphql-code-generator#9234

But honestly this is just one example of why I find it cumbersome to use, so I hope you take a look at the other points of my feedback as well. I opted out for fragment masking just over an hour ago and It's a blessing so far.

I also read the relay docs to understand the principle behind it better and I just don't see the use case for my situtation:

https://relay.dev/docs/principles-and-architecture/thinking-in-relay/

If I understand correctly, one of the big reasons is to prevent that mutating data in one component can have an effect on another view. That all sounds fair but I don't need that at the moment and it's just a very big trade off to add all this code.

[n1ru4l]

I could of course also only grab the id, and find the correct one based on that

This is the way to go.

[ZakKa89]

Sure in this particular use case that would solve it, but there might be other use cases where you want to put data in state... Would love to know if it's possible to type it with fragment masking on, but that's what the topic is for.

Unless you're saying never ever do that and write your code in such a functional manner that you never need to put your data fragments into state. But can't imagine it being that uncommon. Edit: One example I could think of are the items inside a shopping cart: multiple products from a ProductFragment.

[max-ch9i]

You can use DocumentType to get the return type of useFragment.

type Product = DocumentType<typeof ProductFragment>

I also responded to your discussion.

[ZakKa89]

Awesome thank you!

[RMHonor]

I wonder if with error paths in GQL responses it would be possible for individual fragment hooks to give an error, for more granular error handling.

[n1ru4l]

In terms of expected errors, we recommend modeling them as part of your GraphQL schema. See https://blog.logrocket.com/handling-graphql-errors-like-a-champ-with-unions-and-interfaces/

[ericbf]

Does useFragment have to follow the rules of hooks? Or rather, is there a way to use it in a non-hook context (for example, in a loop or function).

[dotansimha]

I think it does not have to follow it, as it's a simple extraction function that also infers types. You can see it's code here: https://github.com/dotansimha/graphql-code-generator/blob/72d1c1a22be239008daf888adf933c342236155c/examples/vue/urql/src/gql/fragment-masking.ts#L42

[ericbf]

Ok, cool! Looking at the implementation, it really is just a typecasting. I can rename the import to avoid the rules of hooks lint rule from flagging it safely then. Thanks!

[masterchef]

Thanks for the article! Can you explain the best way to test such components? Currently, I have to put together the input data from a set of fragments which is a little annoying. It would be great if I could define a my mock data as a single object and pass that in instead. For example:

// Currently only this works

const basicUser: BasicUserFragment = {
  id: 'test',
  ldap: 'ldap',
  firstName: 'First',
  fullName: 'First Last',
  __typename: 'UserResource',
};

const metricViewMock: MetricBlockFragment = {
  id: 'test',
  name: 'Metric Name',
  userMetricQuery: {
    ldap: 'ldap',
  },
  ownerUser: basicUser,
};

But it would be easier to just do this especially if there are a lot of nested fragments.

// One mock data object
const metricViewMock = {
  id: 'test',
  name: 'Metric Name',
  userMetricQuery: {
    ldap: 'ldap',
  },
  ownerUser: {
    id: 'test',
    ldap: 'ldap',
    firstName: 'First',
    fullName: 'First Last',
    __typename: 'UserResource',
  },
};

[satvikpendem]

Does this work with Flutter too?

[2coo]

How to refetch specific fragment?
For example: in FriendList component, how to refetch FriendList_QueryFragment when user click refresh button?

[taprile314]

I also want to know, is there a way of only refetch fragment data or do I need to send up the refetch to my top-level component?

[taprile314]

Do this pattern pushes the developer to apply prop drilling?

[Gyv4ik]

Also interesting how to access data in deeply nested components using such approach.

[adriangalilea]

Same problem, there are several issues and PR's but all of them are being ignored.
dotansimha/graphql-code-generator#9075
dotansimha/graphql-code-generator#9380
dotansimha/graphql-code-generator#9708

[thsyn]

I have a problem with Typescript (and apollo client) and don't know how to solve it.
I can't pass the query result to the child component without getting a type error.

The child component expects the type FragmentType<typeof FRAGMENT>

In the end, everything works, but there is a type error because the result of the apollo hook does not correspond to the FragmentType.
From my point of view, everything is implemented as in the example and I cannot find any other way to do it.

Root Component

'use client';

import { useSuspenseQuery } from '@apollo/client';

import { gql } from '#/types/__generated/gql';

import { TicketDetailsHeader } from './ticket-details-header';

const TicketQuery = gql(/* GraphQL */ `
  query Ticket($ticketNumber: Int!) {
    ticket(ticketNumber: $ticketNumber) {
      ...TicketHeaderFragment
    }
  }
`);

interface TicketDetailsProps {
  ticketNumber: number;
}

export function TicketDetails({ ticketNumber }: TicketDetailsProps) {
  const query = useSuspenseQuery(TicketQuery, { variables: { ticketNumber } });

  return (
    <>
      <TicketDetailsHeader query={query.data.ticket} />
    </>
  );
}

Child component

import { Typography } from '@mui/material';

import { formatTicketNumber } from '#/features/tickets/shared/format-ticket-number';
import { type FragmentType, gql, useFragment } from '#/types/__generated/gql';

const TicketHeaderFragment = gql(/* GraphQL */ `
  fragment TicketHeaderFragment on Ticket {
    id
    ticketNumber
    title
  }
`);

interface TicketDetailsHeaderProps {
  ticket: FragmentType<typeof TicketHeaderFragment>;
}

export function TicketDetailsHeader(props: TicketDetailsHeaderProps) {
  const ticket = useFragment(TicketHeaderFragment, props.ticket);
  const formattedTicketNumber = formatTicketNumber(ticket.ticketNumber);

  return (
    <>
      <Typography variant="h1">
        #{formattedTicketNumber}: {ticket.title}
      </Typography>
    </>
  );
}

[thsyn]

There is a typo

should be

[thsyn]

now.. ;)

<TicketDetailsHeader query={query.data.ticket} />
=> <TicketDetailsHeader ticket={query.data.ticket} />