Apolloクライアントを使用したフラグメント構成：コンベンショナルおよび定型文

Question

Apolloアプリケーション（GraphQL/Relayも含む）では、データ要件をコンポーネントに配置するか、大規模なGraphQLクエリを独自に組み立てることができます。すべてのデータ要件を確認するためにコンポーネントツリー全体やページを見る必要がなく、新しい要件をローカルに追加できるため、長期的にメンテナンス性が向上すると期待しているため、コンポーネントにデータ要件をコロケーションすることを選択しました。

私は、ApolloクライアントでGraphQLフラグメントを作成する方法をよりよく知りたいと思います。私はそれをする方法を知っていますが、私はそれをより良くすることができます。

現在、私のフラグメントを構成するにはかなりの量の定型文が含まれています。特に、プロパティをそのまま渡すコンポーネントがある場合は特にそうです。

フラグメント宣言規約？

まずは、単純なコンポーネントを見てみましょう：ここ

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 
     } 
    `, 
}; 

が作られているいくつかの選択肢があります。ほとんどの例では何らかの種類の規約が使用されているようですが、この規約はドキュメントでは明示的ではありません。

• User.fragmentsで使用されるキー。コンポーネントのpropName userとまったく同じ名前を付けるのは意味がありますか？

• フラグメントの名前：通常、コンポーネントの名前で名前が付けられていて、有用な場合は、そのフラグメントであるGraphQLタイプで接尾辞を付けます。 （ここではUserUserはおそらく過度の接尾辞になります）。

すべてのフラグメント宣言が一貫しているように、同じアプリケーションで同じ規約に従うことが良いと思います。だから、もっと経験豊富な人が、私が多くのアポロの例で使われているようなこのコンベンションを明確にするのに役立つでしょうか？

還元フラグメント組成定型句？

私たちが設定した規約に従い、今度は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小道具のデータが増えます。

これはうまくいきますが、かなり不必要に見える定型部分と中間部分がかなりあります。コンポーネントユーザーの観点からは、2つのフラグメント名を使用できるようにする必要があるため、必ずしも便利ではありません。

私はこれが動作することができ、次の

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

でこれを単純化しようとしましたが、あなたがこれを行う場合は、フラグメントの名前はもうRelationshipUserXUserではありませんが、Userではなく、これは、それがカプセル化を中断していることを意味何らかの形で内部ではRelationshipコンポーネントがUserコンポーネントを使用していることに注意する必要があります。

Relationshipコンポーネントの場合、UserAltのような代替表現を使用すると、関係フラグメントを使用してすべてのコンポーネントからリファクタリングする必要があります。これは避けたいものです。このような場合、変更はRelationshipコンポーネントでのみ行われる必要があります。

結論

私は部品が本当にカプセル化され、そして好ましくは、あまりにも多くの決まり文句を介さずに残るように、アポロでフラグメントを作成するためにベストプラクティスを知りたい

。

私はすでに正しいことをしていますか？

本当にクエリを作成したい場合、この定型文はすべて避けられませんか？上記のように名前間隔のいくつかの種類が必要とされるように、それ以外の場合はあなたより多くの可能性がありますので

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

とは別に、私は、あなたスコープあなたのフラグメント名をお勧めします。このようにそれをやってどのように

Answer 1

同じフラグメント名を2回使用することになります。

すなわち

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