如何访问 Apollo useMutaion 响应答案

【问题标题】：How to access Apollo useMutaion response如何访问 Apollo useMutaion 响应
【发布时间】：2021-08-13 10:10:27
【问题描述】：

当我使用 useMutation 挂钩进行突变时，我可以控制台记录我的数据，但我无法将数据对象保存在 localState 中。我不知道我错过了什么。任何帮助表示赞赏。

我的代码如下：

//Schema file

startTest(identifier: String): TestResponse

变异载荷如下：

  type TestResponse {
    errorCode: Int
    errorMessage: String
    success: Boolean
    transactionId: ID
    version: Int
  }

在解析器中，我硬编码了以下数据返回：

    startTest(_, { identifier }) {
      console.log("hello from server");
      return {
        errorCode: 0,
        errorMessage: null,
        success: true,
        transactionId: "d2984911-bbc4-4e6a-9103-96ca934f6ed3",
        version: 0,
      };
    },

在组件文件夹中，我通过单击按钮触发了突变。

const [startTestt, { loading, error, data }] = useMutation(
    START_FIRE_DAMPER_TEST,
    {
      onCompleted: ({ startFireDampersTest }) =>
        console.log(startFireDampersTest.success),
        useState(startFireDampersTest.success)
       
    },

    {
      onError: () => console.log("error!"), // never gets called
    }
  );

  console.log(result); // undefined

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  if (data && data.startFireDampersTest)
    return (
      <div>
        <p>Success!</p>
        <pre>{JSON.stringify(data, null, 2)}</pre> // I can see string object but how to render the element of the object inside the component??
      </div>
    );


  const triggerTest = () => {
    startTest({ variables: { identifier: "0000000" } });
  };

  return (
    <>
      <Banner />
       <button onClick={triggerTest}>Click to Delete Buck</button>

    </>
  );

我需要访问从突变返回的返回数据以供以后使用。测试响应/有效负载与要更新的任何其他查询或类型无关。它只包含测试的状态和其他我需要保存在本地状态或可能将其呈现在组件中的键值。

【问题讨论】：

标签： graph apollo react-apollo

【解决方案1】：

您的onCompleted 中已经有一个useState，您只需要正确编写即可。假设 useState 是对 React 的 useState 钩子的调用，那么您可能只需要将状态的初始化移至组件。

const [isSuccess, setIsSuccess] = useState(false);
const [startTestt, { loading, error, data }] = useMutation(
    START_FIRE_DAMPER_TEST,
    {
      onCompleted: ({ startFireDampersTest }) =>
        console.log(startFireDampersTest.success),
        setIsSuccess(startFireDampersTest.success)
       
    },
    {
      onError: () => console.log("error!"), // never gets called
    }
  );

【讨论】：