How to avoid extra renders after mutation when call the same useQuery multiple times?

[melounek]

Below is my component, which is re-rendering 5x after mutation when the data changes (instead of 3x), because I call the query hook multiple times. I want to call the useQuery multiple-times because I need to access the data on more places, but without extra re-renders

If I'm changing some data for example in redux, so there is no problem to read them on multiple-places and there will be only one re-render when the data changes, but here after the mutation I see re-render on every usage of the useQuery.

How to avoid that?

import React from "react";
import { useMutation, useQuery } from "relay-hooks";
import { graphql } from "babel-plugin-relay/macro";

const mutation = graphql` ... mutating the viewer->cardsCount ... `;

export const useViewer = () => {
  const { data } = useQuery(graphql`
    query CreateTestQuery {
      viewer {
        id
        cardsCount
      }
    }
  `);
  return data?.viewer;
};

export const RelayHooksTest = React.memo(() => {
  const viewer = useViewer();
  useViewer(); // extra render
  useViewer(); // extra render
  const [mutate] = useMutation(mutation);

  console.log("rerender"); // prints 5x after mutation instead of 3x

  return (
    <button onClick={() => mutate({ variables: { someVariables: 123 }})} >
      Mutate me!
    </button>
  );
});

[morrys]

The two additional render are from the useMutation which updates the loading information:
const [mutate, {loading}] = useMutation(mutation);

[melounek]

We don't understand each other. I counted with 3 re-renders: 2x for loading and 1x for changing data, but there are two more renders because I used the same useQuery 3 times and that doesn't make sense to me why should it be re-rendered 3x when the relay-state changed only once and all three hooks can read the updated state in the same re-render (same way how for example redux works)

[morrys]

When the store is modified relay notifies all hooks that have subscribed to the "record" and they rerender. (in this case there are three hooks)

[melounek]

Yep, that's also the behaviour from the official relay docs: This hook can trigger multiple nested or waterfalling round trips if used without caution. And I am trying to find a way how to use these hooks multiple-times, but without these "round trips".

My actual workaround is passing the useQuery() result into redux and from there I'm reading it using useSelector() because those I can use as many times as I want through my app, and it won't trigger any extra renders.

And I wanted to use relay-state as much as possible and avoid using redux - even for storing some local data, but as I see on this example it would cost me plenty of re-renders.