Warning: RelayConnectionHandler: Unexpected after cursor `WyJuYXR1cmFsIiwxMF0=`, edges must be fetched from the end of the list (`WyJuYXR1cmFsIiwyMF0=`).

I got another strange bug I need to squash before I can carry on with other tasks.

On page http://my-app/my-posts there is a clickable element with onClick handler:

(event) => {
  event.preventDefault();
  history.push('/my-posts'); // same page as current value in browser address bar
}

On the same page there is a component with Load More button. When clicking on that button, it calls loadMore function returned by usePagination hook. It’s almost identical to the usePagination example.

If you press the Load More button without doing anything else, it loads another set of results from the graphql server without problems. It also works if you navigate to another page, and then back (doesn’t matter if using browser’s back button, or using another history.push call, it still works). But for some reason it fails after trying to navigate to the same page, you’re already at, for example you’re on page http://my-app/my-posts and call history.push(‘/my-posts’) and then press the Load More no new items are rendered and I get the following warning:

index.js:1 Warning: RelayConnectionHandler: Unexpected after cursor `WyJuYXR1cmFsIiwxMF0=`, edges must be fetched from the end of the list (`WyJuYXR1cmFsIiwyMF0=`).

I see that the graphql request and response are identical in both cases - when it works fine, and when it fails.

Here is the relevant stacktrace:

console.<computed> | @ | index.js:1
-- | -- | --
  | r | @ | backend.js:1
  | printWarning | @ | warning.js:30
  | push../node_modules/fbjs/lib/warning.js.warning | @ | warning.js:51
  | update | @ | RelayConnectionHandler.js:127
  | (anonymous) | @ | RelayPublishQueue.js:216
  | _getSourceFromPayload | @ | RelayPublishQueue.js:212
  | (anonymous) | @ | RelayPublishQueue.js:242
  | _commitData | @ | RelayPublishQueue.js:238
  | run | @ | RelayPublishQueue.js:178
  | _processResponse | @ | RelayModernQueryExecutor.js:315
  | _handleNext | @ | RelayModernQueryExecutor.js:263
  | (anonymous) | @ | RelayModernQueryExecutor.js:207
  | _schedule | @ | RelayModernQueryExecutor.js:178
  | _next | @ | RelayModernQueryExecutor.js:206
  | next | @ | RelayModernQueryExecutor.js:94
  | next | @ | RelayObservable.js:565
  | (anonymous) | @ | RelayNetworkLayer.js:55
  | Promise.then (async) |   |  
  | subscribe | @ | RelayNetworkLayer.js:54
  | (anonymous) | @ | RelayObservable.js:474
  | _subscribe | @ | RelayObservable.js:610
  | subscribe | @ | RelayObservable.js:296
  | Executor | @ | RelayModernQueryExecutor.js:85
  | execute | @ | RelayModernQueryExecutor.js:43
  | (anonymous) | @ | RelayModernEnvironment.js:224
  | _subscribe | @ | RelayObservable.js:610
  | subscribe | @ | RelayObservable.js:296
  | (anonymous) | @ | RelayObservable.js:233
  | _subscribe | @ | RelayObservable.js:610
  | subscribe | @ | RelayObservable.js:296
  | (anonymous) | @ | fetchQueryInternal.js:114
  | _subscribe | @ | RelayObservable.js:610
  | subscribe | @ | RelayObservable.js:296
  | (anonymous) | @ | RelayObservable.js:211
  | _subscribe | @ | RelayObservable.js:610
  | subscribe | @ | RelayObservable.js:296
  | (anonymous) | @ | RelayObservable.js:369
  | _subscribe | @ | RelayObservable.js:610
  | subscribe | @ | RelayObservable.js:296
  | (anonymous) | @ | RelayObservable.js:211
  | _subscribe | @ | RelayObservable.js:610
  | subscribe | @ | RelayObservable.js:296
  | push../node_modules/relay-hooks/lib/FragmentPagination.js.FragmentPagination._fetchPage | @ | FragmentPagination.js:346
  | push../node_modules/relay-hooks/lib/FragmentPagination.js.FragmentPagination.loadMore | @ | FragmentPagination.js:225
  | loadMore | @ | useOssFragment.js:94

Thanks for looking into it.

[sibelius]

check this

https://babangsund.com/relay_environment_methods/

and

https://babangsund.com/relay_environment_methods_2/

[morrys]

sorry 😃 they seemed to me the same 😄

WyJuYXR1cmFsIiwxMF0 WyJuYXR1cmFsIiwyMF0