reactjs - 突变后重新获取查询不起作用

Question

我的突变如下:

<Mutation
    mutation={ADD_NEW_SLOT}
    refetchQueries={() => [{ query: GET_COMPANY_ADDRESSES, variables: { companyId: this.props.session.company.id } }]}
    awaitRefetchQueries={true}
>
     .......
</Mutation>

其中GET_COMPANY_ADDRESSES是从父组件导出的。

但是突变完成后不会刷新。

我做错了什么？

更新

parent组件中render函数的返回如下:

<Query query={GET_COMPANY_ADDRESSES} variables={{companyId: session.company.id}} notifyOnNetworkStatusChange={true} fetchPolicy={'cache-and-network'}>
    {({loading, error, refetch, data}) => {
        if (loading) return <LoadingIndicator/>;
        if (error) return <ErrorIndicator description={error.message}/>;

        const treeNodes = convertSlotsToTree(data);
        const address = data.companyAddresses[1];

        return (
            <AddSlot address={address}
                     toggleSlotForm={this.props.togglePanel}
                     session={this.props.session}/>
        )
    }}
</Query>

graphql 查询位于同一个文件中，如下所示:

export const GET_COMPANY_ADDRESSES = gql`
      query CompanyAddresses($companyId: Int!) {
        companyAddresses(companyId: $companyId) {
          id    
          name
          default
          compound
          address {
            id
            addressFull
            countryCode
            city
            postCode
            slotSet{
                id
                area
                zone
                aisle
                side
                level
                position
                disabled
                col
                printEntry
                fullName
            }
          }
        }
      }
    `;

Answer 1

它仍然无法与没有解决方法的react-apollo 3.1.x一起使用。

看来，如果你使用这两个东西，更新将被发送到查询:

1. 为查询设置选项:fetchPolicy="cache-and-network"(您已经使用过此选项)。
2. 注释 refetchQueries 并使用 Query 的 refetch 代替。将函数附加到 Mutation 的 onCompleted 上，并直接从 Query 调用 refetch。您应该在 HTTP 请求中看到 graphql 查询，并且 UI 也应该自行更新。

注意。 “缓存优先”作为 fetchPolicy 不起作用，虽然我猜缓存已更新，但 UI 没有。