如何访问 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 客户端的 useQuery 获取响应头