The composition of the fragment with the Apollo client: legend and pattern

Question

In Apollo (but also GraphQL / Relay), you can choose a combination of data requirements for components or, ultimately, assemble large GraphQL queries. We decided to limit the requirements for these components, because we expect better support in the long term, since you do not need to look at the entire tree of components or at your page to see all the data requirements, and can add new requirements locally.

I would like to know better how to compose GraphQL fragments with the Apollo client. I know how to do this, but I would like to know how I can do it better.

Currently, the composition of my fragments includes quite a bunch of templates, especially when I have components that simply pass properties intact.

Fragment Declaration Agreement?

First, take a simple component:

export const User = ({
  user: {
    firstName,
    lastName,
    job,
    email,
    pictureUrl,
    color
  },
  ...props
}) => (
  <UserWrapper {...props}>
    <UserAvatarWrapper>
      <Avatar
        firstName={firstName}
        lastName={lastName}
        color={color}
        src={pictureUrl}
      />
    </UserAvatarWrapper>
    <UserContentWrapper>
      {(firstName || lastName) &&
        <UserName>
          {firstName}
          {" "}
          {lastName}
          {" "}
          {email && <UserEmailInline>{email}</UserEmailInline>}
        </UserName>}
      {job && <UserJob>{job}</UserJob>}
    </UserContentWrapper>
  </UserWrapper>
);
User.fragments = {
  user: gql`
      fragment User on User {
          id
          firstName
          lastName
          pictureUrl: avatar
          job
          color
          email
      }
  `,
};

Here are a few options. Most of the examples seem to use some kind of convention, but this convention is not explicit in the document.

• The key used to User.fragments. Does it make sense to call it exactly like the propName of a usercomponent?

• Fragment name: it seems that, by convention, people call it with the name of the component and, if useful, suffix them using the GraphQL type on which the fragment is located. ( UserUseroverkill suffix will probably be here ).

, , . , - , , -, Apollo?

?

Relationship, , .

const Relationship = ({ user1, user2 }) => (
  <RelationshipContainer>
      <RelationshipUserContainer>
        <User user={user1} />
      </RelationshipUserContainer/>
      <RelationshipUserContainer>
        <User user={user2} />
      </RelationshipUserContainer/>
  </RelationshipContainer>
);
Relationship.fragments = {
  user1: gql`
      fragment RelationshipUser1User on User {
          ...User
      }
      ${User.fragments.user}
  `,
  user2: gql`
      fragment RelationshipUser2User on User {
          ...User
      }
      ${User.fragments.user}
  `,
};

, 2 , . , , 2 , , . me friend, me.

, , . , , , .

Relationship.fragments = {
  user1: User.fragments.user,
  user2: User.fragments.user,
};

, , RelationshipUserXUser, user , - , , Relationship user.

Relationship UserAlt, , . , Relationship.

Apollo, - , , .

?

, ?

Answer 1

:

const userFragment = gql`
  fragment Relationship_user on User {
    ...User_user
  }
  ${User.fragments.user}
`;
Relationship.fragments = {
  user1: userFragment,
  user2: userFragment,
};

, , , - , , , .

.

• User.fragments.user = > User_user
• Relationship.fragments.user = > Relationship_user