Verwenden Sie den Abfrageschlüssel außerhalb der React -Abfrage. Die folgenden Abhängigkeiten fehlen in Ihrem QueryKey ⇐ JavaScript

[Anonymous]

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 ">

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
);
},
});

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]?

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);