useMutation 总是返回未定义的数据答案

【问题标题】：useMutation always returns data undefineduseMutation 总是返回未定义的数据
【发布时间】：2020-03-14 13:55:02
【问题描述】：

这是我的代码

反应

const EXCHANGE_RATES = gql`
  mutation {
    signUp(lastName: "Amasia")
  }
`;
const HandlerRequest = () => {
  const [loading, { data }] = useMutation(EXCHANGE_RATES);

  console.log('apollo', data);

  return <p>apollo</p>;
};

架构

  gql`
  extend type Mutation {
    signUp(
      lastName: String!
    ): String!
  }
`;

解析器

Mutation: {
    signUp: async (
      _,
      { lastName}
    ) => {
      try {
        console.log(lastName)
        return lastName;    
      } catch (error) {
        return 'error';
      }
    },
  },

useMutation 总是返回未定义的数据，但在 graphql 游乐场正在工作。我在做什么 netak ？。

【问题讨论】：

标签： javascript react-apollo graphql-js apollo-server

【解决方案1】：

useMutation 应该返回一个函数来调用以执行突变。通常，您会将其连接到按钮或其他东西上。使用在组件加载时自动执行的突变似乎有点奇怪。

const HandlerRequest = () => {
  const [getExchangeRates, { data }] = useMutation(EXCHANGE_RATES);
  // Load data if not already loaded.
  if (!data) { getExchangeRates(); }
  console.log('apollo', data);

  return <p>apollo</p>;
};

使用上述内容，您可能会看到两个 console.log。

初始组件渲染，应该是未定义的
当 getExchangeRates 返回并且数据更新时，组件将被重新呈现并再次调用日志。

【讨论】：

我用你的例子我会得到永恒的循环。意味着通过函数调用可以发出 Mutation 请求。即时通话不可能？
@Jesus 您可能希望在更高阶的组件中执行此操作，并使用结果数据呈现该组件。
这根本不起作用，if 语句永远不会为真，因此它永远不会触发突变。它在文档中的什么地方表明这是这样做的方法？

【解决方案2】：

使用 onCompleted 回调并记住传递数据对象：

  const [loading, { data }] = useMutation(EXCHANGE_RATES, {
    onCompleted: (data) => {
      console.log(data);
    }
  });

【讨论】：

【解决方案3】：

您对 useMutation 的使用并不完全正确。这是正确的用法。您还需要执行突变。 data 在此之前将是未定义的。

const SomeComponent = () => {
  const [doExchangeRates, { data, loading, error }] = useMutation(
    EXCHANGE_RATES,  
    onCompleted: (data) => {  console.log({data});  }
); 

  return <p onClick={doExchangeRates} >apollo</p>;
};

您可以在 useMutation here 上查看完整文档。

【讨论】：