Use InteractionManager.runAfterInteractions with react-query

[ranshine]

I am using react query in react native application, when i open any screen i am calling api using react query. Inside query result i have loading,data,error,etc. But if i call api without InteractionManager.runAfterInteractions rendering will be slow. Is there any way i can call react query with InteractionManager.runAfterInteractions. If i keep query inside InteractionManager.runAfterInteraction i can't access loading,error,data.

InteractionManager.runAfterInteractions(() => {
const {isLoading,data,error} = fetchPosts()
})

[TkDodo]

you can't run useQuery in a callback, because it's against the rules of hooks. I'm guessing fetchPosts() should be a custom hook that wraps useQuery, so it's more like useFetchPosts() ? In any case, the linter should complain here that this is not allowed.

rendering shouldn't be slow, maybe you can somehow isolate and reproduce that?

[ranshine]

yeah I am having useFetchPosts custom hook which will have fetchPosts method it returns useQuery, But in react native whatever long running tasks are there like api calls, calculating something we should do inside InteractionManager otherwise it will slow down rendering.

[TkDodo]

I'm not an expert here but many people, like @arnaudbzn have done lots of things with react-query in react-native, and I'm guessing without InteractionManager.
We also have react-native example in the docs and it works well there.

[kastriotkastrati]

@ranshine use a higher order function that loads component only after interactions are run.
@TkDodo react-navigation stops the animations until react-query has fetched the data and only then stops the freeze to render the animations and component.

[kastriotkastrati]

I must say I do not know why this is the behavior of react-navigation

[bryanltobing]

@ranshine @kastriotkastrati i believe you can take advantage of enabled flag

const [transititionFinished, setTransitionFinished] = useState(false)

const queryResult = useQuery({queryKey, enabled: transititionFinished })

useFocusEffect(
    useCallback(() => {
      const task = InteractionManager.runAfterInteractions(() => {
        setTransitionFinished(true)
      });

      return () => task.cancel();
    }, []),
  );

and maybe create a custom hook to handle this specific case