[client-preset] How do I have default value for component that is using fragments?

[boompikachu]

For example, I have a component as follows:

// Child
export const UserFragment = graphql(`
  fragment UserFragment on User {
    id
    name
  }
`);

interface ComponentProps {
  userFragment: FragmentType<typeof UserFragment>;
}

export const Component = (props: ComponentProps) => {
  const { name } = useFragment(UserFragment, props.userFragment);

  return <div>{name}</div>;
};

// Parent
export const MyQuery = graphql(`
  query MyQuery($userId: String!) {
    user(where: { id: $userId }) {
      id
      ...UserFragment
    }
  }
`);

export const StudentReport = () => {
  // URQL
  const [{ data }] = useQuery({
    query: MyQuery,
    variables: {
      userId: "1",
    },
  });

  return (
    <div>
      <Component userFragment={data.user} />
    </div>
  );
};

Is there a way for me to do something like this?

<Component userFragment={data.user ?? { id: 'default-id', name: 'defaultName' }} />

But the code above gives error (but works) dues to type error of $fragmentRefs object

[saihaj]

yeah data masking makes types unhappy. usually not really best idea to fill data like this

[2snEM6]

What if I want to write a Storybook story for a masked componen? The same issue would occur. Any ideas? Thank you!

[charpeni]

@2snEM6 you'll need to unmask those fragments.

Here's a proposal for it: #9075, and here's the implementation: #9380.

I would suggest copying those utility types into your codebase and testing them with your use cases and providing feedback on them. 🙏

[2snEM6]

Thanks @charpeni , I will test it and provide feedback if necessary