apollo-client: Loading stuck always true after sending request when using useMutation hook 🤔

I’m using custom useMutation hook but loading state is always true and data is always undefined

const [createPost, { loading, data }] = useCreatePostMutation(); // same `const { loading, data, mutate: createPost } = useMutation;`

console.log(loading); // always true after sending request
console.log(data); // undefined

const handleCreatePostSubmit = async () => {
  const response = await createPost({
    variables: {
      createPostInput: {
        caption,
        base64Photo: preview,
      },
    },
  });
};

System: OS: Windows 10 10.0.19043

Binaries: Node: 14.18.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD

Browsers: Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.39)

npmPackages: @apollo/client: ^3.5.10 => 3.5.10 apollo-server-micro: ^3.6.7 => 3.6.7

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 38
Comments: 36 (4 by maintainers)

Commits related to this issue

uncommenting React strict mode - when developing, there is a issue that sometimes locks Apollo GraphQL`useQuery loading into true, when using strict mode. More info can be found here: https://github.... — committed to jotacrvlho/cruisers by deleted user 2 years ago

Most upvoted comments

@apollo/client @3.6.9 fixes it for me with React 18

busbyk on Sep 16, 2022

This is happening for me in React Native with @apollo/client >= 3.6.0 without strict mode. (react@17.0.2, react-native@0.67.4, StrictMode is not set). Both lazy and non-lazy queries are hanging. Some of the lazy queries are actually returning data but loading is still true, and some non-lazy ones are just never even returning data. v3.5.10 still works perfectly, so it’s definitely something that changed in 3.6.0.

simon-abbott on May 3, 2022

Strict mode on: same results, loading stuck to true after completing a mutation Strict mode off: fixes it @apollo/client: '3.6.2': fixes it

Thanks @benjamn!

Forfold on May 10, 2022

I have same issue on React 18 haha… custom hook the only solution for today until the apollo-client commit bug fixes

syukronarie on Apr 21, 2022

Same issue on React 18, works on React 17 😅

Maxou44 on Apr 19, 2022

I found a workaround for this problem if you want to use React 18

const [error, setError] = useState(null)
const [loading, setLoading] = useState(false)
const [data, setData] = useState(null)
const [mutateFunction] = useMutation(
  GRAPHQL_QUERY
  {
    onError: (error) => {setError(error)},
    onCompleted: (data) => {
      setData(data)
      setLoading(false)
    }
  }
)

function mutateFinally() {
  setLoading(true)
  mutateFunction()
}

mutateFinally()

henriquekirchheck on Apr 19, 2022

I’ll come back and see if I can produce a minimal repro, but the scenario I’m seeing right now is:

Mutation with refetchQueries set to a list
Calling the mutation
Loading stays true after the mutation is called

If I set notifyOnNetworkStatusChange: true, then loading is cleared before the query refetches complete

glenjamin on Apr 5, 2024

Ummh, @i-kosh, I’m sorry to say this, but are you sure you’re in the right repository?

This is Apollo Client, we also have a useMutation hook, but it’s not the same one as Tanstack Query 😅

phryneas on Nov 16, 2023

Was facing the exact same problem with react ^18.1.0 and @apollo/client 3.5.10, React strict mode off solved it !

ChoucheneHayfa on May 26, 2022

Just to add another diagnostic to the mix, I would encourage everyone to try running npm i @apollo/client@next (to get version 3.6.3). I doubt everyone’s issues will be fully addressed by this version, but I know we’ve improved React loading states in this release.

benjamn on May 5, 2022

Same issue here. Works fine when strictmode is deactivated. React 17.0.2 and “@apollo/client”: “^3.6.0”.

brampurnot on Apr 27, 2022