graphql缓存DataIdFromObject未导致React重新呈现

我有两个突变 onLike onSubmit 定义在一个反应组件中。为了 类似 变异,我可以用cache DataIdFromObject this.props.data.refetch() 或 refetchQueries: [] . 但不是为了 变异。

//---反应组分

onSubmit(e) {
    e.preventDefault();
    this.props
        .addLyricQuery({
            variables: {
                content: this.state.content,
                songId: this.props.params.id,
            },
        });
}

onLike(id, likes) {
    this.props.likeLyricQuery({
        variables: { id },
        optimisticResponse: {
            __typename: "Mutation",
            likeLyric: {
                id,
                __typename: "LyricType",
                likes: likes + 1,
            },
        },
    });
}

<button onClick={() => this.onLike(lyric.id, lyric.likes)}>

<button onClick={e => this.onSubmit(e)}>Submit</button>

//——阿波罗连线

const enhancer = compose(
    graphql(fetchSongQuery, {
        options: props => ({
            variables: {
                id: props.params.id,
            },
        }),
    }),
    graphql(addLyricQuery, { name: "addLyricQuery" }),
    graphql(likeLyricQuery, { name: "likeLyricQuery" })
);
export default enhancer(SongDetail);

//——添加查询

import gql from "graphql-tag";

export default gql`
    mutation AddLyricToSong($content: String, $songId: ID) {
        addLyricToSong(content: $content, songId: $songId) {
            id
            title
            lyrics {
                id
                content
            }
        }
    }
`;

import gql from "graphql-tag";

export default gql`
    mutation LikeLyric($id: ID!) {
        likeLyric(id: $id) {
            id
            likes
            content
        }
    }
`;

//——阿波罗商店

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

我希望看到什么?

我希望 和 还是一样的。因此,当我单击任一按钮时,它应该只查询一次,而不需要重新提取数据。

我看到了什么?

按预期工作。单击时,它只发出一个变异,并且立即呈现react组件。

提交 将我引向一个空白页,然后刷新该页后,将显示新数据。我可以通过使用 refetch 或 refetchQueries:[] 但这不是重点。