search

FormidableLabs / urql-exchange-suspense

An exchange for client-side React Suspense support in urql
43 stars 1 forks source link

Breaks when passing changing variables to useQuery #10

Open brielov opened 4 years ago

brielov commented 4 years ago 
export const TripListView: React.FC = () => {
  const [statusIndex, setStatusIndex] = useState<number>(0);
  const status = getStatusByIndex(statusIndex);

  // When status changes, it'll throw an error and break the app
  const [{ data }] = useQuery<{ allTrips: Trip[] }>({
    query: AllTripsQuery,
    variables: { status },
  });

I've tested the query itself and works fine as long as status doesn't change.

If I remove suspense: true and suspenseExchange it works fine.

Am I missing something?

JoviDeCroock commented 4 years ago

What versions are you using? We need some more information/reproduction to easily tell you what's wrong

brielov commented 4 years ago

@JoviDeCroock This is my package.json

{
    "@urql/devtools": "^0.1.2",
    "@urql/exchange-graphcache": "^2.1.0",
    "@urql/exchange-suspense": "^0.1.0",
    "classnames": "^2.2.6",
    "dayjs": "^1.8.19",
    "formik": "^2.1.2",
    "graphql": "^14.5.8",
    "graphql-tag": "^2.10.1",
    "jwt-decode": "^2.2.0",
    "lodash.omit": "^4.5.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "urql": "^1.8.2",
    "yup": "^0.28.0"
  }

No problem , just tell me what information do you need

JoviDeCroock commented 4 years ago

Do you mind trying this: yarn add https://github.pika.dev/kitten/react-wonka/pr/11 this might fix your problem but I have to verify for some use cases

brielov commented 4 years ago

@JoviDeCroock Ok, I'll try it. In the mean time, this is the output log from devtools

react-dom.development.js:27773 Download the React DevTools for a better development experience: https://fb.me/react-devtools
logger.mjs:44 workbox Precaching 16 files.
toSuspenseSource.ts:17 Uncaught Promise {<pending>}
(anonymous) @ toSuspenseSource.ts:17
D @ wonka.es.js:104
(anonymous) @ wonka.es.js:957
D @ wonka.es.js:104
e @ wonka.es.js:306
(anonymous) @ wonka.es.js:348
(anonymous) @ wonka.es.js:39
(anonymous) @ wonka.es.js:358
e @ wonka.es.js:523
(anonymous) @ wonka.es.js:353
D @ wonka.es.js:104
(anonymous) @ wonka.es.js:544
d @ wonka.es.js:939
next @ wonka.es.js:938
(anonymous) @ react-wonka.es.js:1
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
(anonymous) @ react-dom.development.js:25240
workLoop @ scheduler.development.js:641
flushWork @ scheduler.development.js:596
performWorkUntilDeadline @ scheduler.development.js:203
react-dom.development.js:21843 The above error occurred in the <TripListView> component:
    in TripListView (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in Suspense (created by SuspenseBoundary)
    in SuspenseBoundary (created by App)
    in main (created by App)
    in div (created by App)
    in div (created by App)
    in ErrorBoundary (created by App)
    in App
    in Provider
    in Router (created by BrowserRouter)
    in BrowserRouter
    in StrictMode

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-dom.development.js:21843
logError @ react-dom.development.js:21880
update.payload @ react-dom.development.js:23247
getStateFromUpdate @ react-dom.development.js:13640
processUpdateQueue @ react-dom.development.js:13718
updateClassInstance @ react-dom.development.js:14521
updateClassComponent @ react-dom.development.js:18420
beginWork$1 @ react-dom.development.js:20186
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPassiveEffectsImpl @ react-dom.development.js:25420
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
(anonymous) @ react-dom.development.js:25240
workLoop @ scheduler.development.js:641
flushWork @ scheduler.development.js:596
performWorkUntilDeadline @ scheduler.development.js:203
react-dom.development.js:21843 The above error occurred in the <TripListView> component:
    in TripListView (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in Suspense (created by SuspenseBoundary)
    in SuspenseBoundary (created by App)
    in main (created by App)
    in div (created by App)
    in div (created by App)
    in ErrorBoundary (created by App)
    in App
    in Provider
    in Router (created by BrowserRouter)
    in BrowserRouter
    in StrictMode

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-dom.development.js:21843
logError @ react-dom.development.js:21880
update.payload @ react-dom.development.js:23247
getStateFromUpdate @ react-dom.development.js:13644
processUpdateQueue @ react-dom.development.js:13718
updateClassInstance @ react-dom.development.js:14521
updateClassComponent @ react-dom.development.js:18420
beginWork$1 @ react-dom.development.js:20186
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPassiveEffectsImpl @ react-dom.development.js:25420
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
(anonymous) @ react-dom.development.js:25240
workLoop @ scheduler.development.js:641
flushWork @ scheduler.development.js:596
performWorkUntilDeadline @ scheduler.development.js:203
ErrorBoundary.tsx:18 Promise {<pending>}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: Object {componentStack: "↵    in TripListView (created by Context.Consumer)…serRouter)↵    in BrowserRouter↵    in StrictMode"}
brielov commented 4 years ago

@JoviDeCroock Adding taht repo for react-wonka didn't do the trick, sadly. Any suggestion?

JoviDeCroock commented 4 years ago

Hey @brielov

We've been working on an urql version that better supports concurrent and suspense mode by using React's own use-subscription package. We're not entirely sure if we've fixed your issue yet but we'll get to it. In the meanwhile if you want to try it you can find it at https://github.pika.dev/formidablelabs/urql/pr/514

brielov commented 4 years ago

@JoviDeCroock Thanks so much for the response. I'll try it out!