DataIdFromObjectを使用したApolloの正規化が更新されない

Question

削除変異を送信した後、React + Apolloでストアを更新することに問題があります。私は、apollo +反応を組み込んだreactQLボイラープレートとexpress graphQLサーバーを使用しています（私はapolloサーバーをインストールしませんでした - 私はちょうどリファレンスexpress-graphQLパッケージを使用しています）。私のデータは_idのmongoDBに格納されていますが、クライアント側の実際のデータにはidとしてidが使用されています。

アポロクライアントは、次のように定義されています

new ApolloClient(
    Object.assign(
     { 
     reduxRootSelector: state => state.apollo, 
     dataIdFromObject: o => o.id 
     }, 
     opt 
    ) 
); 

私は「SRC/graphql /クエリ/ courses.gql

@graphql(courses) 
export default class CoursesPage extends Component { 
    constructor(props){ 
    super(props) 
    this.handleDelete = this.handleDelete.bind(this); 
    } 

    handleDelete(event) { 
    this.props.mutate({ variables: {id: selectedId}} 
       .catch(err => console.log(err)) 
    } 

    render() { 
    return (
     { this.props.data.courses.map(course => 
     <CourseDelete selectedId={course.id} key={course.id} /> 
     }) 
     } 
    ) 
    } 

} 

と子から 輸入のコースを使用して親コンポーネントを持っていますコンポーネントは、次のようになります。

import deleteCoursefrom 'src/graphql/mutations/deleteCourse.gql 

@graphql(deleteCourse) 
export default class CourseDelete extends Component { 
    constructor(props){ 
    super(props) 
    this.handleDelete = this.handleDelete.bind(this); 
    } 

    handleDelete(event) { 
    this.props.mutate({ variables: {id: this.props.selectedId}} 
       .catch(err => console.log(err)) 
    } 

    render() { 
    return (
     <button onClick={this.handleDelete}>Button</button> 
    ) 
    } 

} 

ここで、deleteCourse.gql：

mutation deleteCourse($id: String!) { 
    deleteCourse(id: $id) { 
    id 
    } 
} 

、私の元のクエリはcourses.gqlである：

は

query courses { 
    courses { 
    id 
    } 
} 

Answer 1

アポロのdataIdFromObjectは、すでにキャッシュ内のオブジェクトを更新するために使用されます。レコードとIDを持っていて、同じIDに対して他のデータを変更すると、そのストアをリスニングするコンポーネントは再レンダリングできます。

deleteCourseの突然変異は同じIDを返すように見えるため、キャッシュにはまだ存在しています。あなたの店は削除が必要であることを知らず、データが戻ってきてもキャッシュを更新するだけです。この突然変異は同じIDを返す可能性が高いので、これを除去する必要があることを示すものは何もない。

代わりに、update function（公式のApollo docsにリンク）を指定して、基礎となるストアデータを明示的に削除する必要があります。私の新しいReactQL user auth exampleで

、私は「手動」で、ユーザがログインした後にストアを更新するために同じこと（see the pertinent LOC here）を行う。

コンポーネントは、最初は「ブランク」のユーザーに聞いているので、私はに頼ることはできませんdataObjectFromIdはキャッシュを無効にします。なぜなら私はユーザーがいないためにIDがないからです。したがって、私は明示的にストア状態を手動で上書きし、リッスンするコンポーネントの再レンダリングをトリガーします。 -

私はコンセプトは、YouTubeの動画では上記のユーザー認証の文脈で説明はこれが関連性の部分である：https://youtu.be/s1p4R4rzWUs?t=21m12s