How to access Apollo useMutaion response - graph

Question

When I do a mutation with useMutation hook, I can console.log my data but I cannot save the data object in a localState. I don't know what am I missing. Any help is appreciated.
My code is as follows:
//Schema file
startTest(identifier: String): TestResponse
the mutation payload is as follows:
type TestResponse {
errorCode: Int
errorMessage: String
success: Boolean
transactionId: ID
version: Int
}
In the resolver I hardcoded the following data return:
startTest(_, { identifier }) {
console.log("hello from server");
return {
errorCode: 0,
errorMessage: null,
success: true,
transactionId: "d2984911-bbc4-4e6a-9103-96ca934f6ed3",
version: 0,
};
},
In component folder I've triggered the mutation with a button click.
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>
</>
);
I need to access returned data returned from mutation for later use. the test response/payload is not related to any other queries or types to update. It just contains status of the test and other key values that I need to save in a local state or maybe render it inside a component.

Answer 1

You already have a useState inside your onCompleted, you'd just need to write properly. Assuming the useState is a call to the a React's useState hook, then you're probably just need to move the initialization of your state to your component.
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
}
);