Cell acting different on two separate pages

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.

Before we discuss the refresh and behavior, may I ask why you don’t get the currentUser id in the service from context and return “myReport”?

This will eliminate 1) any user’s ability to view someone else’s report 2) and delay in the cell fetching needing to await for the page authorization to access currentUser.

Typically one never sends currentUser to the api side in any request because you can’t trust who the requesting user is. This way you know the data has to belong to them in the response.

Hey! Didn’t really expected to bump into RW team member.
First I should have stated that I’m just newbie and this is just a hobby project.

And to the issues!
I’m not getting currentUser inside of the service, because I guess that would mean creating a new function “myReport”, which I’ve done before, but decided to go this route instead:

export const reports = ({ userId }) => {
  if (userId) {
    return db.report.findMany({
      where: { userId },
      orderBy: { createdAt: 'desc' },
    })
  } else {
    return db.report.findMany({
      orderBy: {
        createdAt: 'desc',
      },
    })
  }
}

I actually want other users to have the ability to check other users reports, they are bug reports, so they should be available to anyone.

After reading your comment I tried to solve this currentUser problem you specified by doing this which should help I hope?

// MainLayout.js
export const userContext = createContext()

const MainLayout = ({children}) => {
const { currentUser, logOut } = useAuth()
  const [user, setUser] = useState(currentUser)
  return (
    <>
      <userContext.Provider value={user}>
     ...
    </>
}

edit: Forgot to post the updated ProfilePage

import { useContext } from 'react'

import { MetaTags } from '@redwoodjs/web'

import { useAuth } from 'src/auth'
import MeCell from 'src/components/MeCell/MeCell'
import ReportsCell from 'src/components/ReportsCell/ReportsCell'
import { userContext } from 'src/layouts/MainLayout/MainLayout'

const ProfilePage = () => {
  // const { currentUser } = useAuth()
  const user = useContext(userContext)
  return (
    <>
      <MetaTags title="Profile" description="Profile page" />

      <MeCell />
      <ReportsCell userId={user.id} />
    </>
  )
}

export default ProfilePage