运行使用 useEffect 首次渲染时的 Apollo 突变

Question

我在 MUI 对话框中有一个表单。我想在对话首次打开时创建订单。我认为具有空依赖项的 useEffect 会这样做，但我似乎无法弄清楚为什么它不让突变在 setState 之前解决。

  const [createOrder] = useMutation(CREATE_ORDER);

  const [activeOrder, setActiveOrder] = useState({});

  useEffect(() => {
    const newOrder = async () => {
      await createOrder({
        variables: {
          order: {
            type,
            table,
          },
        },
        refetchQueries: [{ query: ORDERS_QUERY }],
      });
    };

    setActiveOrder(newOrder);
  }, []);

  console.log(activeOrder); // gives me Promise{<fulfilled>: undefined}

此外，是摆脱 // eslint-disable-next-line 缺少依赖项警告的唯一方法吗？如果我将我的函数包装在 useCallback 中以防止呈现循环并添加请求的依赖项，那么 useCallback 会给我一个依赖项未知的错误。

Answer 1

你的问题在这里setActiveOrder(newOrder);

setActiveOrder 可以接受函数作为参数并调用它；
newOrder 是异步函数。异步函数总是 returns 承诺；

解决方案：

/*
maybe your don't need activeOrder, check data from result
https://www.apollographql.com/docs/react/data/mutations/#result
*/
const [createOrder, { data }] = useMutation(CREATE_ORDER, {
  // https://www.apollographql.com/docs/react/data/mutations/#options
  variables: { type, table },
  refetchQueries: [{ query: ORDERS_QUERY }],
});
const [activeOrder, setActiveOrder] = useState({});
    
useEffect(() => {
  createOrder().then((res) => {
    setActiveOrder(res);
  });
    
}, [createOrder]);

useEffect(() => console.log('data:\n', data), [data]);
useEffect(() => console.log('activeOrder:\n', activeOrder), [activeOrder]);

运行使用 useEffect 首次渲染时的 Apollo 突变

Run Apollo mutation on first render with useEffect

apollo

reactjs

use-effect

运行 使用 useEffect 首次渲染时的 Apollo 突变

Run Apollo mutation on first render with useEffect

apollo

reactjs

use-effect

运行使用 useEffect 首次渲染时的 Apollo 突变