Hello, I got this Reports Cell component
import Report from '../Report/Report'
export const QUERY = gql`
query ReportsQuery($userId: Int) {
reports(userId: $userId) {
id
title
description
severity
status
createdAt
user {
id
displayName
}
}
}
`
export const beforeQuery = (props) => {
return {
variables: props,
fetchPolicy: 'cache-and-network',
// pollInterval: 500,
}
}
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Empty</div>
export const Failure = ({ error }) => (
<div style={{ color: 'red' }}>Error: {error?.message}</div>
)
export const Success = ({ reports }) => {
return (
<div>
<div className="my-8 text-center text-2xl font-semibold">Reports</div>
{reports.map((report) => (
<Report report={report} key={report.id} />
))}
</div>
)
}
and I’m passing it into two different pages, the Home Page and Profile Page
// HomePage
import { MetaTags } from '@redwoodjs/web'
import ReportsCell from 'src/components/ReportsCell/ReportsCell'
const HomePage = () => {
return (
<>
<MetaTags title="Home" description="home page" />
<div className="text-2xl">Home</div>
<ReportsCell />
</>
)
}
export default HomePage
// Profile Page
import { MetaTags } from '@redwoodjs/web'
import { useAuth } from 'src/auth'
import MeCell from 'src/components/MeCell/MeCell'
import ReportsCell from 'src/components/ReportsCell/ReportsCell'
const ProfilePage = () => {
const { currentUser } = useAuth()
return (
<>
<MetaTags title="Profile" description="Profile page" />
<MeCell />
<ReportsCell userId={currentUser.id} />
</>
)
}
export default ProfilePage
Now everything works and I get nice results from GQL in the Home page and Users reports on the Profile page.
The problem comes when I’m trying to use DeleteMutation.
Specifically on the Profile page.
When I use the DeleteMutation on the Home page, the entries are automatically updated and the deleted Report dissapears from the list.
But when I try to use the same DeleteMutation on the Profile Page, I get the Success Toast that Report got deleted, but the report does not automatically dissapear as on the Home Page, it stays until refresh or page change.
// Delete Button & Mutation
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/dist/toast'
import { QUERY } from '../../ReportsCell/ReportsCell'
export const DELETE = gql`
mutation DeleteReportMutation($id: Int!) {
deleteReport(id: $id) {
id
}
}
`
const ReportDelete = ({ report }) => {
const [deleteReport, { loading, error }] = useMutation(DELETE, {
refetchQueries: [{ query: QUERY, variables: { id: report.id } }],
onCompleted: () => {
toast.success('Report deleted')
},
onError: (error) => {
toast.error(error.message)
},
awaitRefetchQueries: true,
})
const handleDelete = (id) => {
deleteReport({ variables: { id: id } })
}
return (
<button
className="btn-wide btn-sm btn"
onClick={() => handleDelete(report.id)}
disabled={loading}
>
Remove
</button>
)
}
export default ReportDelete
The only solution was to use beforeQuery in the Cell with pollInterval, but I’m worried this is causing too many hits with no value on my Database.
export const beforeQuery = (props) => {
return {
variables: props,
fetchPolicy: 'cache-and-network',
pollInterval: 5000,
}
}
I hope I’ll be able to find solution here in the community as I’ve spent the whole yesterday on google unable to solve this in some normal manner.