反应Apollo错误-一个组件中的refetchQueries不会重新呈现另一组件中的数据，但是如果它在同一组件中，则重新呈现？

Question

我有一个Main组件，可显示待办事项列表

还有Sidebar组件，其中有很多看起来像

的产品

Sidebar组件之外的右侧是Main组件。

当我在Input框中添加待办事项时，refetchQueries有效，但是当我在Product中选择新的Sidebar时，它不会重新呈现待办事项列表，即Main组件。

它会调用服务器并收到完美的响应，但不会重新渲染。

我认为原因是它在不同的组件中。 This issue正是我要面对的。

完整的代码是开源的，可在https://github.com/deadcoder0904/wip-desktop

获得

相关部分是-

Main.js

refetchQueries works here，因为它被<Query query={GET_TODOS_BY_PRODUCT} variables={{ id }} />组件包裹

<Query query={GET_TODOS_BY_PRODUCT} variables={{ id }}>
    <Mutation
        mutation={CREATE_TODO}
        refetchQueries={[
            {
                query: GET_TODOS_BY_PRODUCT,
                variables: {
                    id: state.get("selectedProduct.id")
                }
            }
        ]}
    >
        {mutate => (
            <Input
                placeholder="Add Todo..."
                value={input}
                onChange={this._onInputChange}
                onKeyPress={e => this._onKeyPress(e, mutate)}
            />
        )}
    </Mutation>
</Query>

Sidebar.js中的

Product.js

refetchQueries doesn't work here，因为它没有用<Query query={GET_TODOS_BY_PRODUCT} variables={{ id }} />包裹

<Mutation
    key={v4()}
    mutation={SWITCH_SELECTED_PRODUCT}
    refetchQueries={[
        {
            query: GET_TODOS_BY_PRODUCT,
            variables: {
                id: product.id
            }
        }
    ]}
>
    {mutate => {
        const highlightedProduct = selectedProduct
            ? product.name === selectedProduct.name
            : i === 0;
        return (
            <Product
                onClick={() => {
                    if (highlightedProduct) return;
                    mutate({
                        variables: { id: product.id, name: product.name }
                    });
                }}
            >
                <Name highlight={highlightedProduct}>
                    {product.name}
                </Name>
            </Product>
        );
    }}
</Mutation>

当同一组件中没有发生突变时，如何使用refetchQueries？

Answer 1

在类似情况下，我处理此问题的方法是在与查询关联的组件中使用this.props.data.refetch。当Mutation在其他组件中更新时，我使用了refetchQueries。希望对您有所帮助。