apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.84k stars 786 forks source link

I can't use subscribeToMore. it always causes undefined error #3931

Open ganzp87 opened 4 years ago

ganzp87 commented 4 years ago

Intended outcome:

I want to just refetch query when new subscription arrived. But, it always causes Errors. Anyone who know this problem??

I just figured out that problems happened on refetch from useQuery

const { data: oldData, refetch, subscribeToMore } = useQuery(
        SEE_CHATLISTS,
        {
            fetchPolicy: "cache-and-network",
        }
    )

const subscribeToNewComments = () => {
        if (subscribeToMore) {
            subscribeToMore({
                document: NEW_MESSAGES,
                variables: { email },
                updateQuery: (prev) => {
                    refetch()
                    return prev
                },
            })
        }
    }

useEffect(() => {
        subscribeToNewComments()
    })

Actual outcome:

undefined is not an object (evaluating '_this.currentObservable.query.subscribeToMore')
- node_modules\@apollo\react-hooks\lib\react-hooks.cjs.js:91:4 in QueryData
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16921:31 in commitHookEffectList
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16970:29 in commitPassiveHookEffects
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20061:28 in flushPassiveEffectsImpl
* [native code]:null in flushPassiveEffectsImpl
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19597:25 in scheduleCallback$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:482:68 in flushTask
- node_modules\scheduler\cjs\scheduler.development.js:607:20 in flushWork
- node_modules\scheduler\cjs\scheduler.development.js:58:18 in _flushCallback
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:399:17 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

How to reproduce the issue:

just clone above codes.

Versions

"@apollo/react-hooks": "^3.1.4" "apollo-client": "^2.6.8" "apollo-link": "^1.2.14"

Jose4gg commented 4 years ago

Same Issue

themmyloluwaa commented 4 years ago

@Jose4gg @ganzp87 any luck getting this to work, for some reason I'm getting the same error.

luco commented 4 years ago

Same here.

image