プレーンアレイ上のリレー変異は機能していません

Question

私はリレーを介してプレーンアレイ上で突然変異を行う方法を理解するのに苦労しています。

投稿に新しいタグを追加しようとしています。 サーバー側で正常に追加された後、クライアント側で更新されません。

新しいタグを表示するには、手動でリロードする必要があります。 REQUIRED_CHILDRENとthis.props.relay.forceFetch()の両方を試しましたが、役に立たないです。

また、FIELDS_CHANGEを投稿しました。

GraphQLスキーマ：

Post { 
    id: ID! 
    text: String! 
    tags: [Tag!]! 
} 

Tag { 
    id: ID! 
    name: String! 
} 

AddTagToPostMutation：

static fragments = { 
    post:() => Relay.QL` 
     fragment on Post { 
     id 
     tags 
     } 
    `, 
    } 

    getMutation() { 
    return Relay.QL`mutation { addTagToPost }`; 
    } 

    getVariables() { 
    return { 
     name: this.props.tag.name, 
    }; 
    } 

    getFatQuery() { 
    return Relay.QL` 
     fragment on AddTagToPostMutationPayload { 
     tag { 
      id 
      name 
     } 
     post { 
      id 
      tags 
     } 
     } 
    `; 
    } 

    getConfigs() { 
    return [{ 
     type: 'REQUIRED_CHILDREN', 
     children: [Relay.QL` 
     fragment on AddTagToPostMutationPayload { 
      tag { 
      id 
      name 
      } 
      post { 
      id 
      tags 
      } 
     } 
     `], 
    }]; 
    } 

    getOptimisticResponse() { 
    return { 
     tag: { 
     name: this.props.tag.name, 
     }, 
     post: { 
     id: this.props.post.id, 
     }, 
    }; 
    } 

Answer 1

freiksenetがすでに指摘したように、FIELDS_CHANGEはgetConfigs()機能で使用されるべきです。私はあなたのスキーマを取って、GraphQLの型を実装しました、サーバー側とクライアント側の突然変異をタグに投稿に追加しました。クライアント側は正常に更新されます。私は私の答えで解決策を洗うつもりです。

まず、サーバーサイドの突然変異を確認します。私の実装ではgraphqlとgraphql-relayのライブラリを使用していますが、以下のようになります。サーバーサイドの突然変異の出力は、タグが追加されたポストであることに注意してください。この投稿はIDが入力として提供されたものです。 graphiqlを使用して

const AddTagToPostMutation = mutationWithClientMutationId({ 
    name: 'AddTagToPost', 
    inputFields: { 
    postId: { type: new GraphQLNonNull(GraphQLID) }, 
    name: { type: new GraphQLNonNull(GraphQLString) }, 
    }, 
    outputFields: { 
    post: { 
     type: PostType, 
     resolve: ({id}) => getPost(id), 
    }, 
    }, 
    mutateAndGetPayload: ({postId, name}) => { 
    const id = fromGlobalId(postId).id; 
    addTagToPost(id, name); 
    return {id}; 
    }, 
}); 

、あなたの変異をテストすることができます。

mutation { 
    addTagToPost(input:{ 
     postId: "UG9zdDpwb3N0Mg==" 
     name:"a new tag name" 
     clientMutationId:"123244"}) { 
    post { 
     id 
     text 
     tags { 
     id 
     name 
     } 
    } 
    } 
} 

私はルートクエリへのすべての投稿のためのフィールドpostsを追加しました。 graphiqlを使用して、私は最初に投稿IDをチェックし、上記を使用しました。

react-relayを使用すると、クライアント側の突然変異コードは以下のようになります。 getVariables()関数の入力変数としてIDを使用する小道postが渡されます。 getConfigs()関数では、postフィールドを更新する必要があると指定します。ペイロードフィールドpostと、渡されたプロットpostとの間の関連付けは、FIELDS_CHANGE突然変異型を使用して確立される。

export default class AddTagToPostMutation extends Relay.Mutation { 
    getMutation() { 
    return Relay.QL`mutation{addTagToPost}`; 
    } 

    getVariables() { 
    return { 
     postId: this.props.post.id, 
     name: this.props.name, 
    }; 
    } 

    getFatQuery() { 
    return Relay.QL` 
     fragment on AddTagToPostPayload { 
     post { 
      id, 
      tags { 
      id, 
      name, 
      } 
     } 
     } 
    `; 
    } 

    getConfigs() { 
    return [{ 
     type: 'FIELDS_CHANGE', 
     fieldIDs: { 
     post: this.props.post.id, 
     }, 
    }]; 
    } 

    static fragments = { 
    post:() => Relay.QL` 
     fragment on Post { 
     id, 
     } 
    `, 
    }; 
} 

クライアント側の変異は、このようにして起動します：

Relay.Store.commitUpdate(new AddTagToPostMutation({ 
     post: postToModify, 
     name: tagName, 
    })); 

Answer 2

私はあなただけで、このような状況でFIELDS_CHANGEを使うべきだと思います。

getConfigs() { 
    return [{ 
     type: 'FIELDS_CHANGE', 
     fieldIDs: {post: this.props.post.id}, 
    }]; 
    } 

    getOptimisticResponse() { 
    return { 
     post: { 
     id: this.props.post.id, 
     tags: [...this.props.post.tags, this.props.tag], 
     }, 
    }; 
    }