Apolloで突然変異を行った後に別のコンポーネントを更新する方法

Question

reduxで状態が変わるとconnectがmapStateToPropsであるコンポーネント小道具をすべて更新します。しかし、突然変異を実行するApolloでは、同じデータを使用しているすべてのコンポーネントが新しい小道具を受け取ります。

これは、データセットが同じであることをApolloが認識していないため、これが予想される動作であると私は理解しています。ここで私が得ているものの例です：編集コンポーネントはusernameを更新して

const query = gql`query { me { username } }` 

@graphql(query) 
class Header extends React.Component { 
    render() { 
    return <h1>{this.props.data.me.username}</h1> 
    } 
} 

const mutation = gql`mutation updateAccount($username: String!) { 
    updateAccount(username: $username) { 
    me { 
     username 
    } 
    } 
}` 
@graphql(mutation) 
class Edit extends React.Component { 
    render() { 
    # ... 
    } 
    onSubmit(e) { 
    e.preventDefault() 
    this.props.mutate({variables: {username: this.state.username}) 
    } 
} 

がHeaderコンポーネントはusername、どこをレンダリングします。 usernameが変更された場合は、Headerを再レンダリングします。私はどのようにクエリをポーリングせずにこれを行うか分からない。

Answer 1

Apolloはクエリの内部キャッシュを保持しており、reduxストアに保存されている内部キャッシュを使用してdataIdFromObjectで結果セットを正規化することができます。

あなたのクライアントを初期化するとき、あなたがdataIdFromObjectを設定する必要があり、内部キャッシュを使用するには：突然変異を実行するとき

const client = new ApolloClient({ 
    dataIdFromObject: o => o.id 
}) 

その後、idは、戻り値の型で返されることを確認：

const mutation = gql`mutation updateAccount($username: String!) { 
    updateAccount(username: $username) { 
    me { 
     id 
     username 
    } 
    } 
}` 

クエリにはIDも含まれている必要があります。

const query = gql`query { me { id username } }` 

Apolloは、idが照会とその突然変異の戻りタイプで同一であることを認識し、それに応じて照会データを更新します。

idは常にタイプ全体で一意ですが、あなたは自動インクリメントIDを使用しているか、彼らは固有のものではありませんならば、あなたがオブジェクトから__typenameを使用することができますので、私は私のGraphQL APIのグローバルIDを使用しています：

const client = new ApolloClient({ 
    dataIdFromObject: o => `${o.__typename}:${o.id},` 
})