React-apollo: Query stuck in loading state when rendered after a query or a network error

Created on 3 Jun 2019  路  3Comments  路  Source: apollographql/react-apollo

Description
When a <Query> component which has previously resulted in a qraphQL or network error is re-rendered, its state changes from error to loading and no request is executed. The component is now stuck in loading state.

Intended outcome:
If the query variables do not change, the <Query> stay in error state. Else the state change to loading and a new request is executed (cache or network).

Actual outcome:
The <Query> component's state changes to loading and no request is executed, whatever the query's variables change or not.

How to reproduce the issue:
I made a sample project to demonstrate the issue at https://codesandbox.io/s/apolloquerystuckaftererror-heyxu

1) open https://codesandbox.io/s/apolloquerystuckaftererror-heyxu
2) click on 'Next' and wait for response (300ms)
3) click on 'GQL Error' or 'Link Error' and wait for response (300ms)
4) click on 'Next' or 'Same'
==> <Query> stuck in loading state

Version

bug confirmed

Most helpful comment

We're just waiting on related Apollo Client changes, then we can get the fix for this (https://github.com/apollographql/react-apollo/pull/3107) merged in. This will be included in the next RA release (actually, we're holding up the next release until this issue is resolved).

All 3 comments

We're just waiting on related Apollo Client changes, then we can get the fix for this (https://github.com/apollographql/react-apollo/pull/3107) merged in. This will be included in the next RA release (actually, we're holding up the next release until this issue is resolved).

It looks like this issue has been merged, but I still consistently get this error.

I am using the useLazyQuery hook from @apollo/react-hooks

Here are my dependencies:

    "dependencies": {
        "@apollo/react-ssr": "^3.0.1",
        "apollo-boost": "^0.4.4",
        "next": "9.0.4",
        "next-with-apollo": "^4.2.0",
        "react": "16.9.0",
        "react-apollo": "^3.0.1",
        "react-dom": "16.9.0"
    },

I am working on a login form. So far I am having two issues.

  1. When logging in with an incorrect username/password the graphql server returns an error. This error gets rendered to the UI. When attempting to log in again with the same incorrect credentials no request is made, and the error clears out. The returned data is always undefined. This happens even though I have fetchPolicy set to network-only.

  2. When logging in with an incorrect username/password for the first time, and then trying again with a different user/pass combination the query gets stuck in a loading state, and a network request is performed and resolved but I receive no update.

Was this page helpful?
0 / 5 - 0 ratings