Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refetch doesn't update store at certain circumstances #3573

Closed
cainiaokan opened this issue Jun 12, 2018 · 10 comments
Closed

refetch doesn't update store at certain circumstances #3573

cainiaokan opened this issue Jun 12, 2018 · 10 comments

Comments

@cainiaokan
Copy link

cainiaokan commented Jun 12, 2018

I use recompose pattern to organize my react components.

const isLoading = ({ loading }) => loading;
const EditQA = compose(
  withEditReducer,
  withGetQALib,
  withGetQAPairsPaging,
  withDeleteQAPairs,
  withHandlers(handlers),
  branch(isLoading, renderNothing),
)(_EditQA);

The withGetQAPairsPageing HOC is declared as below:

const withGetQAPairsPaging = graphql(queries.getQAPairsPaging, {
  options: ({ match }) => ({
    variables: {
      libId: match.params.id, ...DEFAULT_GET_QA_PAIRS_VARIABLES,
    },
  }),
  props: ({
    data: {
      getQAPairsPaging: {
        current,
        total,
        pageSize,
        qaPairsPaging,
      } = {},
      refetch,
    },
    ownProps: {
      match,
      dispatch,
      state: {
        isTableLoading,
      },
    },
  }) => ({
    qaPairs: qaPairsPaging,
    current,
    pageSize,
    total,
    onPageChange(pagination) {
      dispatch(setTableLoadingState(true));
      refetch({
          libId: match.params.id,
          pageNo: pagination.current,
          pageSize: pagination.pageSize,
      })
        .then(() => dispatch(setTableLoadingState(false)))
        .catch(() => dispatch(setTableLoadingState(false)));
    },
  }),
});

The above code's feature is simple and easy to reason about. It provides a table component with paging functionality.

I've dived into the source code of apollo-client a little bit.

I found that this statement in my code,
dispatch(setTableLoadingState(true));, caused the whole component to re-render which then
caused the Query.componentWillReceiveProps to call updateQuery method.
Since the query variables had changed(pageNum was changed), ObservableQuery.setVariables then triggered this.queryManager.fetchQuery and made requestId increased by 1 which resulted in the conditional expression requestId >= (lastRequestId || 1) in fetchQuery failed when the actual request had finished.

The consequence of failing the above condition is the _this.setQuery in fetchRequest function would never be called and result of this request was accidentally discarded. That's why the table stayed unchanged.

Intended outcome:

The table content changes to the next page after clicking the next button.

Actual outcome:

The table content stays unchanged after clicking the next button.

How to reproduce the issue:

Versions

System:
OS: macOS High Sierra 10.13.4
Binaries:
Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
npm: 6.0.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
Browsers:
Chrome: 66.0.3359.181
Safari: 11.1
npmPackages:
apollo-cache-inmemory: ^1.1.12 => 1.2.2
apollo-client: ^2.2.8 => 2.3.2
apollo-link: ^1.2.2 => 1.2.2
apollo-link-batch-http: ^1.2.2 => 1.2.2
apollo-link-error: ^1.0.9 => 1.1.0
apollo-link-schema: ^1.1.0 => 1.1.0
apollo-server-koa: ^1.3.4 => 1.3.6
react-apollo: ^2.1.4 => 2.1.4

@acomito
Copy link

acomito commented Jun 17, 2018

refetchQueries has caused me so many headaches since moving to apollo...

@dendrochronology
Copy link

Is this related to (or perhaps the cause of) apollographql/react-apollo#1929?

I tried a simple React <Query> example based off the docs, and refetch() doesn't update the store. Updating to the latest packages didn't help.

@hwillson
Copy link
Member

hwillson commented Jun 28, 2018

@dendrochronology Are you able to share the quick sample app you put together, that shows this happening? Any form of repro would greatly help here (you can use https://codesandbox.io/s/7361K9q6w as a starting point if that helps). Thanks!

@dendrochronology
Copy link

In setting up an example, I realized that fetchMore has the behavior that I was expecting. I still may try to reproduce, as I understand refetch should still update the store with new results.

@lahed
Copy link

lahed commented Jun 28, 2018

Refetch don't work for me, i pass variables and doesn't update store

@kkotwal94
Copy link

refetch is returning new data in the console for me, but is not updating the props of the components grabbing it or using the query we're refetching

@jamesjara
Copy link

Same issuehere

@hwillson
Copy link
Member

hwillson commented Aug 7, 2018

If anyone here can supply a reproduction that demonstrates this issue, I'll be happy to take a look. Closing for now though since we haven't received a repro. Thanks!

@hwillson hwillson closed this as completed Aug 7, 2018
@pl12133
Copy link

pl12133 commented Feb 13, 2019

Reproduced as #2285

@hugoh59
Copy link

hugoh59 commented May 16, 2020

Updates ?

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants