gqless icon indicating copy to clipboard operation
gqless copied to clipboard

`useTransition` support

Open samdenty opened this issue 4 years ago • 0 comments

useTransition is the hook that allows for non flashy UI transitions.

Currently https://github.com/facebook/react/issues/17199 means it's impossible to detect during render whether a component has a useTransition, and whether or not it's pending.

Somehow we need to signal to the gqless react binding not to throw a promise (both hook & HoC), when it's pending, AKA:

const { something } = useQuery();
const [startTransition, isPending] = unstable_useTransition({
	timeoutMs: 3000
});

if (isPending) {
  doNotThrowPromiseAndJustRenderWithOldData()
}

This should uphold the concurrent mode guarantees, at least for loading states.

ways I can think of to do this:

  • gqless provides it's own wrapped useTransition
    • this won't work with third-party libraries that use the real one
  • gqless overwrites useTransition and inserts logic to check for the pending state
    • we would need to do this at the start of the application, import("@gqless/react").enableTransitions() (would be graceful)

samdenty avatar Apr 11 '21 07:04 samdenty