Используйте ключ запроса за пределами запроса React. Следующие зависимости отсутствуют в вашем запросе ⇐ Javascript

[Anonymous]

Я пытаюсь использовать React Query с ключом запроса.

Я хочу использовать ключ запроса вне запроса React < /strong>.

ie: пройти клавишу запроса вниз к какому -то другому компоненту, поэтому ключ запроса согласован.

Затем я столкнулся с проблемой eslint для массива зависимости < /strong> и usememo rerender < /strong>. (См. Ниже)

Что вы обычно делаете, чтобы решить это? \ < /p>

(я не думаю, что я сделал это неправильно. Я думаю, что проблема-Eslint. И я потеряю силу Eslint.) PrettyPrint-Override "> const queryKey = useMemo(
() => ['forumposts', 'list', { userSearchFor }, pagination, filterModel, sortModel],
[filterModel, pagination, sortModel, userSearchFor]
);
const {
data,
isLoading,
error: errorMsgOfFetch,
refetch,
isSuccess,
} = useQuery({
queryKey,
queryFn: async () => {
const base_url = `/api/forumposts/search`;
const url = base_url + (userSearchFor != null ? `?userId=${userSearchFor}` : '');
const dataReturnSchema = Paginated_ForumpostSchema;
return await fetchHelper(
url,
{
method: 'POST',
body: JSON.stringify({ page: pagination.page, pageSize: pagination.pageSize, filterModel, sortModel }),
},
dataReturnSchema
);
},
});


Попытка 2:
Если я ulememo .

Теперь Eslint знает массив зависимости и не будет жаловаться на это. < /p>
Но теперь QueryKey < /code> будет воссоздан каждый раз.

и что -то вроде usecallback или компонента, которое использует QueryKey < /code> будет повторно или перерабатывает каждый раз.

Но вы видите, у меня есть 2 QueryKey < /strong> здесь. Очень ошибка. const queryKey = useMemo(
() => ['forumposts', 'list', { userSearchFor }, pagination, filterModel, sortModel],
[filterModel, pagination, sortModel, userSearchFor]
);
const {
data,
isLoading,
error: errorMsgOfFetch,
refetch,
isSuccess,
} = useQuery({
queryKey: ['forumposts', 'list', { userSearchFor }, pagination, filterModel, sortModel],
queryFn: async () => {
const base_url = `/api/forumposts/search`;
const url = base_url + (userSearchFor != null ? `?userId=${userSearchFor}` : '');
const dataReturnSchema = Paginated_ForumpostSchema;
return await fetchHelper(
url,
{
method: 'POST',
body: JSON.stringify({ page: pagination.page, pageSize: pagination.pageSize, filterModel, sortModel }),
},
dataReturnSchema
);
},
});

Попытка 4:
Переместите всю Optreactquery Out.

хорошо, что TypeScript и Eslint не жалуются.

Но разве QueryKey все еще воссоздает < /strong> каждый раз? Почему Eslint не жалуется ? const optReactQuery = {
queryKey: ['forumposts', 'list', { userSearchFor }, pagination, filterModel, sortModel],
// queryKey,
queryFn: async () => {
const base_url = `/api/forumposts/search`;
const url = base_url + (userSearchFor != null ? `?userId=${userSearchFor}` : '');
const dataReturnSchema = Paginated_ForumpostSchema;
return await fetchHelper(
url,
{
method: 'POST',
body: JSON.stringify({ page: pagination.page, pageSize: pagination.pageSize, filterModel, sortModel }),
},
dataReturnSchema
);
},
}
// const queryKey = useMemo(
// () => ['forumposts', 'list', { userSearchFor }, pagination, filterModel, sortModel],
// [filterModel, pagination, sortModel, userSearchFor]
// );
const queryKey = optReactQuery.queryKey;
const {
data,
isLoading,
error: errorMsgOfFetch,
refetch,
isSuccess,
} = useQuery(optReactQuery);
< /code>
Попытка 5 < /h3>
Оберните Optreactquery в Usememo.

все еще ничего не жалуется.

Но я начинаю сомневаться в том, что Eslint < /strong> работает должным образом ... < /p>
Я также сомневаюсь, что передат меморандум с использованием < /strong> является правильным подходом? const optReactQuery = useMemo(() => ({
queryKey: ['forumposts', 'list', { userSearchFor }, pagination, filterModel, sortModel],
// queryKey,
queryFn: async () => {
const base_url = `/api/forumposts/search`;
const url = base_url + (userSearchFor != null ? `?userId=${userSearchFor}` : '');
const dataReturnSchema = Paginated_ForumpostSchema;
return await fetchHelper(
url,
{
method: 'POST',
body: JSON.stringify({ page: pagination.page, pageSize: pagination.pageSize, filterModel, sortModel }),
},
dataReturnSchema
);
},
}),
[filterModel, pagination, sortModel, userSearchFor]
);
// const queryKey = useMemo(
// () => ['forumposts', 'list', { userSearchFor }, pagination, filterModel, sortModel],
// [filterModel, pagination, sortModel, userSearchFor]
// );
const queryKey = optReactQuery.queryKey;
const {
data,
isLoading,
error: errorMsgOfFetch,
refetch,
isSuccess,
} = useQuery(optReactQuery);


Подробнее здесь: https://stackoverflow.com/questions/795 ... re-missing