Notes: The code is working well, to my understanding, but i am not sure if thats how its suppose to be. If anyone can give me feedback if its written optimally, or it has flaws, please let me know.
I also attached a picture of the query dev tools
const fetcher = async (url, params) => {
const res = await axios.get(url, {
params
})
return res.data
}
export default function Inspiration() {
const router = useRouter()
const page_size = 12
const queryClient = useQueryClient()
const { data, isLoading, isError, isPreviousData } = useQuery(
{
queryKey: ['projects', router.query.page, page_size],
queryFn: () =>
fetcher('/api/projects', {
page_num: router.query.page,
page_size
})
},
{
keepPreviousData: true
}
)
const tags = useQuery(['tags'], () => fetcher('/api/project-tags'), {
staleTime: Infinity,
cacheTime: Infinity
})
useEffect(() => {
queryClient.prefetchQuery(
['projects', Number(router.query.page) + 1, page_size],
() =>
fetcher('/api/projects', {
page_num: Number(router.query.page) + 1,
page_size
})
)
}, [router.query.page, queryClient, page_size])
if (isLoading) return <Loading />
if (isError) return <div>error</div>
Notes: The code is working well, to my understanding, but i am not sure if thats how its suppose to be. If anyone can give me feedback if its written optimally, or it has flaws, please let me know.
I also attached a picture of the query dev tools
const fetcher = async (url, params) => {
const res = await axios.get(url, {
params
})
return res.data
}
export default function Inspiration() {
const router = useRouter()
const page_size = 12
const queryClient = useQueryClient()
const { data, isLoading, isError, isPreviousData } = useQuery(
{
queryKey: ['projects', router.query.page, page_size],
queryFn: () =>
fetcher('/api/projects', {
page_num: router.query.page,
page_size
})
},
{
keepPreviousData: true
}
)
const tags = useQuery(['tags'], () => fetcher('/api/project-tags'), {
staleTime: Infinity,
cacheTime: Infinity
})
useEffect(() => {
queryClient.prefetchQuery(
['projects', Number(router.query.page) + 1, page_size],
() =>
fetcher('/api/projects', {
page_num: Number(router.query.page) + 1,
page_size
})
)
}, [router.query.page, queryClient, page_size])
if (isLoading) return <Loading />
if (isError) return <div>error</div>