apollo-client: New variables are not used after refetch(newVars)

Hello! I don’t know how to make it better. Please help. I use the function:

    async update() {
        let variables = {
            company: this.props.match.params.companyId,
            filter: this.filter, order: this.order, limit: this.pagiation.limit, offset: this.pagiation.offset
        };
        await this.props.refetch(variables);
    }

But I see in Network two queries and nothing happens. The first one is right, but the second is the default data (like variables: { company: props.match.params.companyId, filter: {}, order: [], limit: 10, offset: 0 }). Why?

@ApolloReact.graphql(ApolloReact.gql"
    query Departments($company: ID!, $filter: DepartmentFilter!, $order: [DepartmentOrder], $limit: Int, $offset: Int) {
        company {
            get(id: $company) {
                id,
                name,
                color,
                departments {
                    list(filter: $filter, order: $order, limit: $limit, offset: $offset) {
                        departments {
                            id,
                            color,
                            name,
                            users {
                                id, avatar, username
                            },
                            tags {
                                name
                            },
                            date
                        },
                        count
                    }
                }
            }
        }
    }", {
    props: ({ ownProps, data: { loading, company, refetch } }) => ({
        company: company && company.get,
        departments: company && company.get && company.get.departments && company.get.departments.list.departments,
        count: company && company.get && company.get.departments && company.get.departments.list.count,
        loading: loading,
        refetch: refetch
    }),
    options: (props) => ({
        fetchPolicy: 'cache-and-network',
        variables: { company: props.match.params.companyId, filter: {}, order: [], limit: 10, offset: 0 }
    }),
})

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 43 (7 by maintainers)

Most upvoted comments

@joebernard Thanks for reporting this. There hasn’t been any activity here in quite some time, so we’ll close this issue for now. Can you open a new issue reporting your issues with a reproduction for us to take a look into?

+37

jbaxleyiii on Jul 9, 2019

I have updated the versions of apollo-client and other packages in the reproduction and this bug is still present.

Please see https://codesandbox.io/s/j3410pq2vv

  "dependencies": {
    "apollo-cache-inmemory": "1.6.2",
    "apollo-client": "2.6.3",
    "apollo-link-http": "1.5.15",
    "graphql": "14.4.2",
    "graphql-tag": "2.10.1",
    "react": "15.6.1",
    "react-apollo": "2.5.8",
    "react-dom": "15.6.1"
  }

@jbaxleyiii Could we revisit the original issue?

+10

pl12133 on Jul 10, 2019

I’m still seeing this issue with latest apollo-client (2.0.3)

+10

moimael on Nov 21, 2017

I’m experiencing a similar issue with refetch. I set some breakpoints and notice that Apollo will first run the query with the new variables. It will then trigger the original query to run, which uses the original props. This overwrites the new results with the old/original results. Then, if I trigger refetch again with new variables, it will perform the query with the new variables and NOT attempt to run the original query. I get the expected behavior on this second attempt.

It looks like refetch is not using the variables, but it does. It just runs the original query immediately after making it seem like only the original variables were used.

I’m using the HOC implementation with compose and graphql(). I’m also using the aws-appsync package, which seems to be using an older version of apollo-client (2.4.6). All of these could be factors in what I’m seeing.

joebernard on May 2, 2019

I have this problem as well. Refetching a query with the same variables (that delivers a different result bc it’s random) does return new data visibly in the network debugger, but the cache is not being updated. adding fetchPolicy: 'network-only' does not help. @apollo/client 3.0 beta-43

mschipperheyn on May 7, 2020

having the same issue , how to solve? props are not updated

ishancns on Jan 3, 2018

same error, tell me why.

geminiyellow on Jun 13, 2018

Please reopen the issue. @apollo/client@3.0.0-rc.7

In my pagination test the cache is updated after refetch only the first time. Consequent fetches, as @mschipperheyn said, just ignore new data. Clearly something’s broken there.

Sending ALL variables.
fetchPolicy has no effect on this.

Workarounded by injecting random: Math.random() field into the query. Getting more bizarre.

Update: looks like the same workaround hack was used by others https://github.com/apollographql/react-apollo/issues/3315 🤣

ivan-kleshnin on Jun 23, 2020

Same error

lahed on Jun 22, 2018

Hopefully this is helpful: With the latest apollo-client release (apollo-client@2.2.7), you can call client.queryManager.clearStore() right before you refetch and your props should update correctly.

Edit: Note that you may cause the original query to be made in conjunction with the new query.

etripier on Mar 13, 2018

Seeing this as well

zackify on Mar 4, 2018

Still reproducible. Calling refetch with new variables results in two visible queries in the network debugger, but the second one contains original variables and overwrites the data fetched with new variables. Changing fetchPolicy doesn’t solve the problem for me.

I got this working by storing variables as state and changing initial useQuery arguments based on state, and then calling refetch without any parameters.

"react-apollo": "^3.1.4"

Droniu on Feb 8, 2022

Still experiencing this issue with refetch in "react-apollo": "3.1.4". My workaround was to simply:

import { useApolloClient } from '@apollo/react-hooks';

client.query({ query: SEARCH_DISCOUNTS, variables })
   .then(response => {
      // do other stuff with the response
   });

ambuznego on Jun 17, 2020

@joebernard I’m having the same issue on 2.6.3 using the same method (HOCs but without aws-appsync). I’m currently getting around it by using withApollo() and querying via client.query() in place of where the refetch was.

JamieKudla on Jul 9, 2019

I have also encountered the same behaviour.

When I call this.props.data.refetch(), without a variables argument, I see a network request for the query and this.props.data updating. However, if I call this.props.data.refetch({ stuff }), I still see a network request with the updated variables, but the corresponding props does not update. this.props.data.refetch({ stuff }) does return a Promise resolving to the results, though.

Using far older versions here.

    "apollo-client": "^1.2.2",
    "react-apollo": "^1.2.0",

nyanpasu on Oct 24, 2017

But if I call console.log(await this.props.refetch(variables)); this is what I need, but I want to see it in props.

    async update() {
        let variables = {
            company: this.props.match.params.companyId,
            filter: this.filter, order: this.order, limit: this.pagiation.limit, offset: this.pagiation.offset
        };
        console.log(await this.props.refetch(variables));
    }

makamekm on Oct 11, 2017