Hello Word! kali ini penulis akan menbahas menggenai react query, jadi tuh hari ini penulis mendapatkan masalah untuk melakukan fetch ulang dengan mengunakan react query tapi hanya beberapa keys saja yang akan di fetch ulang.
import { useQueryClient } from 'react-query'
function MyComponent() {
const queryClient = useQueryClient()
const handleRefetch = async () => {
await queryClient.refetchQueries('myQueryKey')
}
return (
<div>
<button onClick={handleRefetch}>Refetch</button>
</div>
)
}
pada baris ke 7 menunjukan kalau hanya bisa mengunakan satu ke saja untuk melakukan fetch ulang ke backend.
Lantas bagaimana cara nya untuk melakukan refetch dengan keys yang banyak. Rupanya cara untuk handle fetching ulang dengan key yang banyak tidak lah susah.
import React, { useEffect, useState } from "react";
import { useQueryClient } from 'react-query'
function MyComponent() {
const queryClient = useQueryClient();
const [queryKeysList, setQueryKeysList] = useState([]);
const handleRefetch = async () => {
queryKeysList.forEach( async (itemKey) => {
await queryClient.refetchQueries(itemKey);
}
}
useEffect(() => {
const queryCache = queryClient.getQueryCache();
const queryKeys = queryCache.getAll().map(cache => cache.queryKey);
const stringKeysQuery: string[] = [];
queryKeys.forEach(item => {
stringKeysQuery.push(item as unknown as string);
}
});
setQueryKeysList(stringKeysQuery);
},[])
return (
<div>
<button onClick={handleRefetch}>Refetch</button>
</div>
)
}
Pada Source Code kali ini pada line 15 dan 16 mengambil data keys yang ada di cache react query, kemudian pada line 19 keseluruhan key tersebut akan di masukan ke state queryKeysList. Kemudian untuk handleRefetch nya akan di lakukan perulangan untuk setiap key nya supaya setiap key akan di lakukan fecthing ulang ke backend.
