Skip to content

Instantly share code, notes, and snippets.

@dineshigdd
Last active June 16, 2023 12:39
Show Gist options
  • Save dineshigdd/1555b0ce5dd74b957799b6b80d138b80 to your computer and use it in GitHub Desktop.
Save dineshigdd/1555b0ce5dd74b957799b6b80d138b80 to your computer and use it in GitHub Desktop.
This is the component for deleting a post. It uses GraphQL mutation.
import React, { useEffect } from 'react'
import { DELETE_POST } from './mutations';
import { useMutation } from '@apollo/client';
export default function deletePost({ post, setAllState , item }) {
const [ deletePost, { data, loading , error } ] = useMutation( DELETE_POST);
useEffect(()=>{
if( data ){
setAllState( "Post deleted" )
}
}, [ data ]);
const handleDelete = ()=>{
deletePost( { variables : { id : post.id }})
item.current[ post.id ].remove();
setAllState('');
}
//place the return statement after useEffect.
//Otherwise there will be an runtime error when submitting the form
if (loading) return 'Submitting...';
if (error){
setAllState( error.message);
}
return (
<div>
<button onClick={ handleDelete } type="submit">Delete</button>
</div>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment