Refetch queries after Mutation doesn't work

Question

I have mutation as follows:

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

Where GET_COMPANY_ADDRESSES is exported from a parent component.

But it doesn't refresh after the mutation is done.

What am I doing wrong?

UPDATE

The return of the render function in the parent component is as follows:

<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>

The graphql query is in the same file and it is as follows:

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

That looks right. Do you see the query being fired after your mutation in the network tab? If so, is it the same query and same variables as what's fired by your Query component? — Daniel Rearden
@DanielRearden Yes. It's the same. Everything looks fine. When I refresh the page I see the new record but the UI doesn't update without manual refresh. — Boky
If the variables are the same for both requests, then it sounds like possibly an issue with your Query component. Can you edit your question to include that code? — Daniel Rearden
Apollo recommends to use update prop on Mutation component over refetch. — Pavan Bahuguni

Max Popoff Max Popoff · Accepted Answer · 2019-12-26T19:44:11

It still does not work with react-apollo 3.1.x w/o workaround.

It seems that if you use these two things, updates will be sent to Query:

Set option for Query: fetchPolicy="cache-and-network" (you use this already).
Comment refetchQueries and use Query's refetch instead. Attach function to Mutation's onCompleted, and call refetch from the Query directly. You should see graphql query in HTTP requests, and UI should updates itself as well.

Note. "cache-first" as fetchPolicy did not work, although I guess cache is updated, but UI does not.

Refetch queries after Mutation doesn't work

1 Answers