How to use useQuery in realm-react with react-navigation/native

[HuuNguyen312]

Code example

 const isFocus = useIsFocused()
 
 const [showDone, setShowDone] = React.useState(false);
  const tasks = useQuery(
    Task,
    collection =>
      showDone
        ? collection.sorted('createdAt')
        : collection.filtered('isComplete == false').sorted('createdAt'),
    [showDone],
  );

I'm using useQuery in realm-react to listen for changes to a collection. I want to combine it with @react-navigation/native, so that when the screen loses focus, it will cancel listening for useQuery changes, and when it gets focus, it will listen again.

Thanks

[kraenhansen]

The useQuery hook uses useEffect underneath and returns a clean-up callback which will remove the listener when the component using it gets unmounted. So "screen loses focus, it will cancel listening for ... changes" should be the default behaviour.

If thats not your experience, can you perhaps share a bit more code or information on potential issues you're experiencing?
Perhaps some code which uses the navigation library as well?

[HuuNguyen312]

I'm using "@react-navigation/native" to navigate the screen.
For example, I have 2 screens TaskList and TaskDetail

Screen TaskList
 const isFocus = useIsFocused()
 
 const [showDone, setShowDone] = React.useState(false);
  const tasks = useQuery(
    Task,
    collection =>
      showDone
        ? collection.sorted('createdAt')
        : collection.filtered('isComplete == false').sorted('createdAt'),
    [showDone],
  );

When I navigate from TaskList screen to TaskDetail screen
The TaskList screen will lose focus (isFocus = false). Then I don't want to receive any changes from useQuery

Until TaskDetail screen returns to TaskList screen -> TaskList refocus (isFocus = true). At this time, useQuery will update the latest value.

Currently, useQuery only cancels listening when TaskList screen has unmounted

[kraenhansen]

Ahh okay, I think I get it now. Would it make sense to wrap the data consuming code in a component that you mount/unmount conditionally on the value of isFocus?

I'm thinking:

{isFocus && <TaskList />}

And then call useQuery from within the TaskList.

[HuuNguyen312]

This option causes loss of state of TaskList, for example: scrollPosition, ...
If useQuery has addListener and removeListeners methods or param "enabled" -> it would be great.

[SMhdAsadi]

Something like the enabled parameter in React Query's useQuery hook can be helpful.