Verwenden Sie den Abfrageschlüssel außerhalb der React -Abfrage. Die folgenden Abhängigkeiten fehlen in Ihrem QueryKey
Posted: 13 Apr 2025, 21:36
Ich versuche, die React -Abfrage mit einem Abfragetaste zu verwenden.
Ich möchte Abfragetaste außerhalb der React -Abfrage < /strong> verwenden.
IE: Die Abfrageschlüssel an eine andere Komponente übergeben, sodass die Abfrageschlüssel konsistent ist.
Dann stellt ich dem Problem von Eslint für das Abhängigkeitsarray < /strong> und Usememo renender < /strong> gegenüber. (Siehe unten)
Was tun Sie üblicherweise, um dies zu lösen? \ < /p>
(Ich glaube nicht, dass ich es falsch gemacht habe. Ich denke, das Problem ist eslint. Und ich verliere die Kraft von Eslint.) < /li>
(Ich verstehe, warum wir dies brauchen, es ist wie UseEffect, es muss die Abfrage durch die Veränderung der Variablen durch die Veränderung von Variablen aktualisieren.) PrettyPrint-Override ">
Versuch 2:
Jetzt kennt Eslint das Abhängigkeitsarray und beschwert sich nicht darüber.
und etwas wie UseCallback oder Komponente, die QueryKey < /code> jedes Mal wiedergeben oder neu renovieren.
Aber Sie sehen, ich habe hier 2 QueryKey < /strong>. Sehr fehleranfällig.
Versuch 4:
Verschieben Sie die gesamte OPTreactQuery aus.
Es ist gut, dass sich das Typenkript und Eslint nicht beschwert.
Aber ist nicht jedes Mal der QueryKey nachgebaut < /strong>? Warum beschwert sich Eslint nicht [/b]?
Ich möchte Abfragetaste außerhalb der React -Abfrage < /strong> verwenden.
IE: Die Abfrageschlüssel an eine andere Komponente übergeben, sodass die Abfrageschlüssel konsistent ist.
Dann stellt ich dem Problem von Eslint für das Abhängigkeitsarray < /strong> und Usememo renender < /strong> gegenüber. (Siehe unten)
Was tun Sie üblicherweise, um dies zu lösen? \ < /p>
(Ich glaube nicht, dass ich es falsch gemacht habe. Ich denke, das Problem ist eslint. Und ich verliere die Kraft von Eslint.) < /li>
(Ich verstehe, warum wir dies brauchen, es ist wie UseEffect, es muss die Abfrage durch die Veränderung der Variablen durch die Veränderung von Variablen aktualisieren.) PrettyPrint-Override ">
Code: Select all
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
);
},
});
Versuch 2:
Jetzt kennt Eslint das Abhängigkeitsarray und beschwert sich nicht darüber.
und etwas wie UseCallback oder Komponente, die QueryKey < /code> jedes Mal wiedergeben oder neu renovieren.
Aber Sie sehen, ich habe hier 2 QueryKey < /strong>. Sehr fehleranfällig.
Code: Select all
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
);
},
});
Verschieben Sie die gesamte OPTreactQuery aus.
Es ist gut, dass sich das Typenkript und Eslint nicht beschwert.
Aber ist nicht jedes Mal der QueryKey nachgebaut < /strong>? Warum beschwert sich Eslint nicht [/b]?
Code: Select all
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>
ad kann 5 < /h3>
opTreactQuery in einen Usememo einwickeln.
immer noch nichts beschwert.
Aber ich beginne zu Zweifel, ob der Eslint < /strong> richtig funktioniert ... < /p>
Ich bezweifle auch, ob eine Memo übersetzt, um query < /strong> ein richtiger Ansatz zu verwenden? 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);