Should I pass query and mutation objects into useEffect or not?

[nemanjam]

Let's say I need to do some side effect based on results of queries and mutations, what is more optimal and performant, to pass entire objects in useEffect or select properties in render itself?

Which one is better alternative, 1 or 2?

Alternative 1:

const messageQuery = useMessage(messageId);
const messageMutation = useUpdateMessage();

useEffect(() => {
  if (
    messageId &&
    !(messageQuery.isLoading || messageQuery.isRefetching) &&
    messageQuery.data &&
    messageQuery.data.isPublished === false &&
    !messageMutation.isLoading
  )
    messageMutation.mutate(messageId, { message: { isPublished: true } });
}, [messageId, messageQuery, messageMutation]);

Alternative 2:

const messageQuery = useMessage(messageId);
const messageMutation = useUpdateMessage();

const shouldUpdateMessage =
  messageId &&
  !(messageQuery.isLoading || messageQuery.isRefetching) &&
  messageQuery.data &&
  messageQuery.data.isPublished === false &&
  !messageMutation.isLoading;

useEffect(() => {
  if (shouldUpdateMessage)
    messageMutation.mutate(messageId, { message: { isPublished: true } });
}, [shouldUpdateMessage, mutate, messageId]);

[TkDodo]

it would probably be better to just run that side-effect inside the QueryFunction itself.

[nemanjam]

I didn't understand that, can you illustrate with code example? Side-effect here is update Message mutation which updates the database.

[TkDodo]

I don't really understand the use-case of running a mutation after a query runs. Queries are meant to run automatically, at arbitrary times (automatic refetches). Are you happy with your mutation running that often? If so, you can do:

useQuery({
  queryKey,
  queryFn: async () => {
    const data = await fetchData()
    updateMessage(data) // this is the mutation...
    return data
  }
})

but it still seems to me like something's not quite right. Maybe describing the use-case would help me understand?

[nemanjam]

I rephrased original models and variable names so it might seem a bit confusing, but the idea is this:

When user visits a page I use useEffect(() => {}, []) to run updateMessage mutation that will flip isPublished to true in the database. useMessage query is needed to check isPublished before updateMessage mutation. That is the idea. I need onLoad event which in React is useEffect with an empty array of dependencies, but I need to pass query and mutation objects for condition and id for the mutation.

// when user visits the page flip message.isPublished to true in the database
// useUpdateMessage mutation invalidates useMessage query

const messageQuery = useMessage(messageId);
const messageMutation = useUpdateMessage();

useEffect(() => {
  if (
    messageId &&
    !(messageQuery.isLoading || messageQuery.isRefetching) &&
    messageQuery.data &&
    messageQuery.data.isPublished === false && // query was needed to read isPublished before mutation
    !messageMutation.isLoading
  )
    messageMutation.mutate(messageId, { message: { isPublished: true } });
}, [messageId, messageQuery, messageMutation]);

[TkDodo]

isn't this something the backend should check? I mean, what happens if you fire the mutation when isPublished is already true? Not much I suppose ...

[nemanjam]

Original code is private so I had to rephrase it, but I couldn't think another 100% coherent example. Anyway my original dilemma was when I need to use results of queries and mutations inside useEffect should I select needed properties in render or do it inside the useEffect and pass entire query/mutation objects as dependencies? I often need to use such results in useEffect and wasn't completely sure whats more performant. Select properties on each render or have change detection on big objects, what is more expensive?