React-apollo: TypeError: Cannot read property 'getCurrentResult' of undefined

[Ayc0]

I have this error: TypeError: Cannot read property 'getCurrentResult' of undefined
when doing:

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

import QUERY from '../gql/queries/query.gql';

export default props => {
  const { data } = useQuery(QUERY);
  return null;
};

with:

{
  "dependencies": {
    "@apollo/react-hooks": "3.0.0",
    "apollo-cache-inmemory": "1.6.3",
    "apollo-client": "2.6.4",
    "apollo-link": "1.2.12",
    "apollo-link-http": "1.5.15",
    "apollo-link-ws": "1.0.18",
    "apollo-utilities": "1.3.2",
    "blessed": "0.1.81",
    "graphql": "14.4.2",
    "kleur": "3.0.3",
    "node-fetch": "2.6.0",
    "react": "16.9.0",
    "react-apollo": "3.0.0",
    "react-blessed": "0.6.1",
    "subscriptions-transport-ws": "0.9.16"
  }
}

(I also tried "apollo-client": "2.6.4")

The issue seems to come from useQuery because I don't have the error when the return is above

And I don't have multiple apollo-client in my yarn.lock

[hwillson]

@Ayc0 any chance you can put together a small runnable reproduction that shows this happening? There isn't enough to go on with the code sample you've provided. The Cannot read property 'getCurrentResult' of undefined error is likely happening due to an attempt to call getCurrentResult on the internal ObservableQuery after it has been destroyed, which happens during unmount. A repro would help confirm this. Thanks!

[Ayc0]

@hwillson, I'm gonna push my buggy code tonight (EDT)

But it was really like in the code snippet that I wrote in the example:

I have a component that imports a gql file with parcel 1, and I have the error when the component that has useQuery(GQL); is rendered.

(I think the bugs doesn't appear in the 1st render but when it gets the data and tries to re-render)

[Ayc0]

Okay, if you run yarn start in the folder terminal-client, you should see the error:

And the file that causes the issue is this one (need to be on the branch update-hook)

[Ayc0]

I tried using gql from graphql-tag instead of the gql loader from parcel but I have the same issue

And upgrading to [email protected] doesn't solve the issue

[Ayc0]

I think it's related to react-blessed not apollo so I'm closing the issue

[davidfant]

@Ayc0 I'm experiencing similar issues. How did you resolve this?

[Ayc0]

@davidfant nope I didn't fix it

[chrishurlburt]

Was there any progress on this? I am running into the same error with useLazyQuery

[Victordmdb]

I'm running into the same issue, this happens during the initial render of a component which calls the lazyload query immediately after rendering.

[thomasin]

I think it is something to do with the render blocking. It breaks when I call the lazy query on mount within a useLayoutEffect. Works if it is within a useEffect

[serkankaracasulu]

if i use useLazyQuery inside other query's onComplate callback throw same error

[maieulChevalier]

same error for me when trying to run useLazyQuery in a mutation through the onCompleted property:
I've tested my useLazyQueries and mutations separately and they all work. If I run a mutation in the onCompleted property, it works as well. It's only when running a useLazyQuery in a mutation through the onCompleted property that it doesn't work.

See below the log:

TypeError: Cannot read property 'getCurrentResult' of undefined

QueryData.handleErrorOrCompleted
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:378

  375 | };
  376 | 
  377 | QueryData.prototype.handleErrorOrCompleted = function () {
> 378 |   var _a = this.currentObservable.query.getCurrentResult(),
      | ^  379 |       data = _a.data,
  380 |       loading = _a.loading,
  381 |       error = _a.error;

View compiled

QueryData.afterExecute
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:161

  158 | this.isMounted = true;
  159 | 
  160 | if (!lazy || this.runLazy) {
> 161 |   this.handleErrorOrCompleted();
      | ^  162 |   setTimeout(function () {
  163 |     _this.currentObservable.query && _this.currentObservable.query.resetQueryStoreErrors();
  164 |   });

View compiled

(anonymous function)
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:465

  462 |   return lazy ? queryData.executeLazy() : queryData.execute();
  463 | }, memo);
  464 | useEffect(function () {
> 465 |   return queryData.afterExecute({
      | ^  466 |     lazy: lazy
  467 |   });
  468 | }, [result]);

View compiled

commitHookEffectList
node_modules/react-dom/cjs/react-dom.development.js:18053

  18050 | if ((effect.tag & mountTag) !== NoEffect$1) {
  18051 |   // Mount
  18052 |   var create = effect.create;
> 18053 |   effect.destroy = create();
        | ^  18054 |   {
  18055 |     var _destroy = effect.destroy;
  18056 | 

View compiled

commitPassiveHookEffects
node_modules/react-dom/cjs/react-dom.development.js:18080

  18077 | 
  18078 | function commitPassiveHookEffects(finishedWork) {
  18079 |   commitHookEffectList(UnmountPassive, NoEffect$1, finishedWork);
> 18080 |   commitHookEffectList(NoEffect$1, MountPassive, finishedWork);
        | ^  18081 | }
  18082 | 
  18083 | function commitLifeCycles(finishedRoot, current$$1, finishedWork, committedExpirationTime) {

View compiled

HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:147

  144 |     window.event = windowEvent;
  145 |   }
  146 | 
> 147 |   func.apply(context, funcArgs);
      | ^  148 |   didError = false;
  149 | } // Create a global error event handler. We use this to capture the value
  150 | // that was thrown. It's possible that this error handler will fire more

View compiled

invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:196

  193 | // errors, it will trigger our global error handler.
  194 | 
  195 | evt.initEvent(evtType, false, false);
> 196 | fakeNode.dispatchEvent(evt);
      | ^  197 | 
  198 | if (windowEventDescriptor) {
  199 |   Object.defineProperty(window, 'event', windowEventDescriptor);

View compiled

invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:250

  247 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  248 |   hasError = false;
  249 |   caughtError = null;
 250 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
      | ^  251 | }
  252 | /**
  253 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores

View compiled

commitPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js:19706

  19703 | var didError = false;
  19704 | var error = void 0;
  19705 | {
> 19706 |   invokeGuardedCallback(null, commitPassiveHookEffects, null, effect);
        | ^  19707 | 
  19708 |   if (hasCaughtError()) {
  19709 |     didError = true;

View compiled

wrapped
node_modules/scheduler/cjs/scheduler-tracing.development.js:177

  174 |   }
  175 | } finally {
  176 |   try {
> 177 |     returnValue = callback.apply(undefined, arguments);
      | ^  178 |   } finally {
  179 |     exports.__interactionsRef.current = prevInteractions;
  180 | 

View compiled

flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js:19759

  19756 |   if (passiveEffectCallback !== null) {
  19757 |     // We call the scheduled callback instead of commitPassiveEffects directly
  19758 |     // to ensure tracing works correctly.
> 19759 |     passiveEffectCallback();
        | ^  19760 |   }
  19761 | }
  19762 | 

View compiled

dispatchAction
node_modules/react-dom/cjs/react-dom.development.js:14041

  14038 |     lastRenderPhaseUpdate.next = update;
  14039 |   }
  14040 | } else {
> 14041 |   flushPassiveEffects();
        | ^  14042 |   var currentTime = requestCurrentTime();
  14043 | 
  14044 |   var _expirationTime = computeExpirationForFiber(currentTime, fiber);

View compiled

QueryData._this.runLazyQuery
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:80

  77 |   _this.runLazy = true;
  78 |   _this.lazyOptions = options;
  79 | 
> 80 |   _this.forceUpdate();
     | ^  81 | };
  82 | 
  83 | _this.getExecuteResult = function () {

View compiled

onCompleted
src/components/Main/CreateContent/CreateCategory/CreateCategory.1.js:98

   95 | const [createParentCategory] = useMutation(CREATE_PARENT_CATEGORY, {
   96 |   variables: { name: parentCategoryInput },
   97 |   onCompleted: (data) => {
>  98 |     getCategory()
      | ^   99 |   }
  100 | });
  101 | 

View compiled

▼ 3 stack frames were expanded.

callOncomplete
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:588

MutationData.onMutationCompleted
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:600

(anonymous function)
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:506

[maieulChevalier]

Okay, I got this working by using the refetchQuery property instead of the onCompleted inside of my useMutation to throw off my useLazyQuery.

[hwatanabe9393]

I also encountered this issue as well.
It occurred when I try to use lazy query in subscription's updateQuery.

Here is how I fixed:

1. I created a state that holds variables which will be used as variables for lazy query.
2. Call useEffect with the state as a trigger condition
   aka. useEffect(()=>{lazyQuery},[state])
3. Whenever I have to use the lazy query from subscription's updateQuery, I updated the state using setState.