Run query on trigger (e.g. button press) in React Native

[mangkoran]

How do I run queries on trigger? My use case is using GraphQL and want to run GrapqhQL queries/mutations on button press.

Update: Oh I am forgotten the crucial part: How do I do this in React Native components? Because I'm getting Unhandled promise rejection, [Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Below is the snippet of Pressable component I used:

<Pressable
	onPress={() => {
  		someMutation.mutate()
	}}
> 
</Pressable>

Update: Here is the code: https://github.com/mangkoran/crowdfinder-client/blob/50fb4a3cbb70806881c78ea0740c1ccfaef73fc1/utils/activity.js#L29
and here is where I use it: https://github.com/mangkoran/crowdfinder-client/blob/50fb4a3cbb70806881c78ea0740c1ccfaef73fc1/screens/CreateActivityScreen.js#L39

[kdoroszewicz]

I ran into such use case a few month ago and this is how I approached it:

const [queryState, setQueryState] = useState(false);
...
const {data} = useQuery(["yourQuery", queryState], yourFn, {
enabled: Boolean(queryState)
}

When you want it to fetch just run setQueryState(new Date());

For mutations just use provided mutate or mutateAsync functions.

[TkDodo]

in most cases, you don't just want to fetch on a button press, but when a user has made / finished some interaction that is relevant for your query:

const [filters, setFilters] = useState()
const { data } = useQuery(['todos', filters], () => fetchTodos(filters), { enabled: !!filters, keepPreviousData: true })

with that, I can make a filters form with a submit button that the user can fill out. Once they click submit, I can call setFilters. This will automatically trigger a fetch with those filters because they are part of the query key, and they will also be cached separately for each set of filters.

notes:

• enabled makes sure that the query doesn't fire when I have no filters
• keepPreviousData makes sure that I don't go to hard loading states when the key changes. Depends on the ux that you want. you can still show a background loading spinner with isPreviousData returned from useQuery.

[mangkoran]

Sorry, I forgot the crucial part. Actually I am trying to achieve this behavior in React Native. But I got Unhandled promise rejection error. What should I do?

[kdoroszewicz]

Any details? It's pretty generic error.

[jmsims2]

I was using react query in a react native app (now abandoned...side projects, am I right?!) and it worked fine. Can you perhaps share more of your code?

Here is a hook we had to create something (in supabase) https://github.com/jmsims2/spot-app/blob/main/src/hooks/useCreateSpot.ts

and then the component using it: https://github.com/jmsims2/spot-app/blob/main/src/components/AddSpot.tsx

[mangkoran]

Sorry. I just updated my question above.

[mangkoran]

After I followed @jmsims2 example above, I am now able to solve the issue (mangkoran/crowdfinder-client@f52475b). I think its just me that still not understand how to use react-query properly. Thank you anyway!