graphql 缓存 DataIdFromObject 不会导致 React 重新渲染

Question

我在一个反应​​组件中定义了两个突变onLike 和onSubmit。对于onLike 突变，我可以使用带有DataIdFromObject 的缓存来更新数据，而无需使用this.props.data.refetch() 或refetchQueries: [] 重新获取数据。但不适用于onSubmit 突变。

// --- 反应组件

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
});

我会看到什么？

我希望onSubmit 和onLike 之间的行为相同。因此，当我单击任一按钮时，它应该只查询一次，而无需重新获取数据。

我看到了什么？

onLike 按预期工作。单击时，它只发出一个突变，并且立即渲染 react 组件。

onSubmit 将我带到一个空白页面，然后一旦我刷新页面，就会显示新数据。我可以通过使用refetch 或refetchQueries: [] 使其工作，但这不是重点。

Answer 1

onSubmit 函数的上下文未绑定，因此您不会阻止默认表单行为

改变：

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

到：

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