如何访问 Apollo useMutaion 响应

Posted

技术标签:

【中文标题】如何访问 Apollo useMutaion 响应【英文标题】:How to access Apollo useMutaion response 【发布时间】: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>

    </>
  );

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

【问题讨论】:

【参考方案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
    
  );

【讨论】:

以上是关于如何访问 Apollo useMutaion 响应的主要内容,如果未能解决你的问题,请参考以下文章

Apollo 客户端乐观响应如何工作

我如何模拟 Apollo Android 的响应

如何从 Apollo 客户端的 useQuery 获取响应头

如何在 Kotlin Android 中读取 Apollo Client 响应/GraphQL 响应的响应数据

Redux + Apollo:如何规范化和格式化响应数据?

如何模拟 graphQL/Apollo 查询响应以在 redux 中测试 action-creator?