CODEWITHSUNDEEP
reactjsgraphqlreact-apollo
Boky
Boky

Reputation: 12084

Refetch queries after Mutation doesn't work

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

Upvotes: 2

Views: 6538

Answers (3)

user3359670
user3359670

Reputation: 3

I have also stumbled on this error and my solution was to import and use the query in the same component as the mutation. i.e.

const {} = useFindAllUsersQuery();
const [createUser] = useCreateUserMutation({
  refetchQueries: ['FindAllUsers']
});

Upvotes: 0

RukshanS
RukshanS

Reputation: 191

With Angular I found this working, as expected (note the "no-cache" flag):

this.postsQuery = this.apollo.watchQuery<any>({
    query: GET_USER_ON_ROLE,
    fetchPolicy: "no-cache",
    variables: {
      roleId : this.roleId
    }      
  });

this.querySubscription = this.postsQuery
    .valueChanges
    .subscribe(({ data, loading }) => {
      this.loading = loading;
      this.allUsers = data.getAllUsersPerRoleUI;
  });

An you need to reload once the mutation is over using refetch():

  public reloadFunction()
  {
    this.postsQuery.refetch() 
  }

Upvotes: 0

Max Popoff
Max Popoff

Reputation: 109

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:

  1. Set option for Query: fetchPolicy="cache-and-network" (you use this already).
  2. 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.

Upvotes: 4

Related Questions