Preventing Automatic Update of List When Fetching Specific Record

[chemseddine201]

I have two queries with different keys: ['signup-list'] to retrieve a list of records, and ['signup-list', 'id'] to fetch a single record. However, when I use the 'useQuery' function to fetch a specific record, the corresponding record in the list automatically updates. I would like to know how to prevent this automatic update of the record in the list until I explicitly refresh the list.

[samhirtarif]

Dose the queryFn for the queryKey ['signup-list'] get executed?

[chemseddine201]

single item fetch:
const query = useQuery(['umm-signup', id], () => baseApi.get(/api/signup-list/${id}), {
enabled: !!id && (edit || duplicate),
keepPreviousData: true,
retry: false,
refetchOnReconnect: true,
refetchOnWindowFocus: false
});

list of items fetch:
const { status, isLoading, isError, isSuccess, data } = useQuery(
['umm-signup-list', state], //state is an object of filters
() => baseApi.get(/api/signup-list?${queryStr}),
{
onError: (err) => {
//reload();
}
}
);

[samhirtarif]

Are these useQuery usages in the same component?
If yes, it would be better if you could share the code for the entire component. And please do add it as a code block, makes it much easier to read

[chemseddine201]

The useQuery usages are not within the same component. The main issue is that when fetching data, the item gets updated in the cached data list, which is unintended.

[samhirtarif]

I doubt that the item in the list can get updated without the list useQuery being called again. So I am trying to figure out if there is a way that its gets called again for some reason.
Is the state value passed in the list useQuery key ['umm-signup-list', state] local to that component?

It would really help if you could share the code for both components that have these useQuery instances

[chemseddine201]

The problem caused by a wrong implementation in the following function:

export const initialValues = (query, duplicate=false, uniqueFields=[], itemFields=[], data = {}) => { let resultData = data; if (query?.isSuccess) { const item = query?.data?.data?.data?.item; if (item && Object.keys(item).length) { resultData = {...resultData, ...item}; } }

The error occurred because the variable resultData was holding a reference to the object data instead of its value. To resolve this issue, i assign a copy of the data object to resultData, like this: resultData = {...data}. This ensures that any updates made to resultData won't affect the original reference and the cached data in the list with the query key ["umm-signup-list"].