Issue with UI Refresh After Editing Data Using useQuery

[asifka-ramz]

I'm facing an issue with a table edit using useQuery. After editing, I'm able to retrieve the latest data from the server using the refetch function and invalidate method , but unfortunately, the UI doesn't seem to refresh to reflect these changes.

Below is a snippet of the code:

//data
const productData = data?.allProductsDashboard?.edges.map((edge) => edge.node) || []

column field
{
accessorFn: (dataRow) => dataRow?.variants[0]?.price,
id: 'price',
header: t('price'),
muiEditTextFieldProps: ({ cell, row }) => ({
type: 'number',
required: true,
error: !!validationErrors?.[cell.id],
helperText: validationErrors?.[cell.id],
className: "appearance-none",
onChange: (event) => {
const validationError = !validateRequired(event.currentTarget.value)
? t('required')
: undefined;

                    let priceValidationError;

......

and dependency like

],

    [editedItems, validationErrors, productData],
);

Any assistance or insights would be greatly appreciated. Thank you!"