React-query setQueryData 不重新渲染组件

Question

我已经处理这个问题有一段时间了，但仍然无法解决。

我使用 React-query 作为服务器状态管理库，并且尝试在发生突变时使 UI 状态与服务器状态同步。由于我可以使用突变响应来避免新的 API 调用，因此我使用了 React-query 为我们提供的 setQueryData 功能。

问题是，当突变成功时，旧数据正在被正确修改（我可以在react-query DevTools中看到它），但使用它的组件没有被重新渲染，使得我的UI状态与我的服务器状态（好吧，至少用户看不到更新）。

让我展示一些代码并希望有人能给我一些见解。

Component using the query:

const Detail = ({ orderId }) => {
  const { workGroups } = useWorkGroups();
  const navigate = useNavigate();

  const queryClient = useQueryClient();
  const orderQueries = queryClient.getQueryData(["orders"]);
  const queryOrder = orderQueries?.find((ord) => ord.id === orderId);

// more code

Component mutating the query：

const Deliver = ({
  setIsModalOpened,
  artisan,
  index,
  queryQuantity,
  queryOrder,
}) => {
  const [quantity, setQuantity] = useState(() => queryQuantity);

  const { mutate: confirmOrderDelivered } = useMutateOrderDeliveredByArtisan(
    queryOrder.id
  );

  const onSubmit = () => {
    confirmOrderDelivered(
      {
        id: queryOrder.artisan_production_orders[index].id,
        artisan: artisan.user,
        items: [
          {
            quantity_delivered: quantity,
          },
        ],
      },
      {
        onSuccess: setIsModalOpened(false),
      }
    );
  };

// more code

Now the mutation function (ik it's a lot of logic but I dont' want to refetch the data using invalidateQueries since we're dealing with users with a really bad internet connection). Ofc you don't need to understand each step of the fn but what it basically does is update the old queried data. In the beginning I thought it was a mutation reference problem since React using a strict comparison under the hood but I also checked it and It doesn't look like it's the problem. ：

{
      onSuccess: (data) => {
        queryClient.setQueryData(["orders"], (oldQueryData) => {
          let oldQueryDataCopy = [...oldQueryData];
          const index = oldQueryDataCopy.findIndex(
            (oldData) => oldData.id === orderId
          );

          let artisanProdOrders =
            oldQueryDataCopy[index].artisan_production_orders;

          let artisanProductionOrderIdx = artisanProdOrders.findIndex(
            (artProdOrd) => artProdOrd.id === data.id
          );

          artisanProdOrders[artisanProductionOrderIdx] = {
            ...artisanProdOrders[artisanProductionOrderIdx],
            items: data.items,
          };

          const totalDelivered = artisanProdOrders.reduce((acc, el) => {
            const delivered = el.items[0].quantity_delivered;
            return acc + delivered;
          }, 0);

          oldQueryDataCopy[index] = {
            ...oldQueryDataCopy[index],
            artisan_production_orders: artisanProdOrders,
            items: [
              {
                ...oldQueryDataCopy[index].items[0],
                quantity_delivered: totalDelivered,
              },
            ],
          };
          return oldQueryDataCopy;
        });
      },

      onError: (err) => {
        throw new Error(err);
      },
    }

最后但并非最不重要的一点是：我已经检查了 oldQueryData 是否被正确修改（控制台登录突变响应中的 onSuccess fn），并且正如我之前所说，数据在 React-query DevTools 中被正确修改。

我知道这是很多代码，而且问题似乎很复杂，但我真的相信这可能是一件非常简单的事情，我没有指出，因为我已经很累了。

谢谢！

Answer 1

嗯，恕我直言，我以最糟糕的方式修复了它，所以我会回答这个问题，但我真的很想读一下你的想法。

看起来只有当突变函数位于我们实际想要重新渲染的组件中时，在预期查询上设置的新查询数据才会重新渲染组件。

考虑到这一点，我所做的只是将我的突变函数放在父组件中，然后通过子组件向下传递。

像这样的东西：

const Detail = ({ orderId }) => {
  const { workGroups } = useWorkGroups();
  const navigate = useNavigate();

const { mutate: confirmOrderDelivered } = useMutateOrderDeliveredByArtisan(
    queryOrder.id
  ); ==============> THE MUTATION FN IS NOW IN THE PARENT COMPONENT

  const queryClient = useQueryClient();
  const orderQueries = queryClient.getQueryData(["orders"]);
  const queryOrder = orderQueries?.find((ord) => ord.id === orderId);

// more code

First child：

const Assigned = ({ artisan, queryOrder, index, confirmOrderDelivered }) => {

// THE IMPORTANT PART HERE IS THE PROP BEING PASSED DOWN.

 <Modal
          isOpen={isModalOpened}
          toggleModal={setIsModalOpened}
          // className="w312"
          width="80%"
          height="fit-content"
          justifyCont="unset"
          alignItems="unset"
        >
          <Deliver
            setIsModalOpened={setIsModalOpened}
            artisan={artisan}
            queryQuantity={quantity}
            queryOrder={queryOrder}
            index={index}
            confirmOrderDelivered={confirmOrderDelivered} => HERE
          />
        </Modal>

Component that actually needs the mutation fn：

const Deliver = ({
  setIsModalOpened,
  artisan,
  index,
  queryQuantity,
  queryOrder,
  confirmOrderDelivered,
}) => {
  const [quantity, setQuantity] = useState(() => queryQuantity);

  const onSubmit = () => {
    confirmOrderDelivered( => HERE.
      {
        id: queryOrder.artisan_production_orders[index].id,
        artisan: artisan.user,
        items: [
          {
            quantity_delivered: quantity,
          },
        ],
      }
    );
  };