Question

这是我的代码

反应

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？。

Answer 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.logs。

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

Answer 2

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

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

Answer 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 的完整文档。

useMutation始终返回未定义的数据

3 个答案: