Why re-render after updating cache even with {refetch:false}? #2574
-
|
Great framework, was playing with it, found a problem, So basically, this is generated by This is the list page, I just added one feature, display the boolean import { Suspense } from "react"
import { Head, Link, usePaginatedQuery, useRouter, BlitzPage, Routes, useMutation } from "blitz"
import Layout from "app/core/layouts/Layout"
import getTodos from "app/todos/queries/getTodos"
import updateTodo from "app/todos/mutations/updateTodo"
const ITEMS_PER_PAGE = 100
const TodosList = () => {
const router = useRouter()
const page = Number(router.query.page) || 0
const [{ todos, hasMore }, { setQueryData }] = usePaginatedQuery(getTodos, {
orderBy: { id: "asc" },
skip: ITEMS_PER_PAGE * page,
take: ITEMS_PER_PAGE,
})
const [updateTodoMutation] = useMutation(updateTodo)
const goToPreviousPage = () => router.push({ query: { page: page - 1 } })
const goToNextPage = () => router.push({ query: { page: page + 1 } })
return (
<div>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<input
type="checkbox"
checked={todo.done}
onChange={(e) => {
updateTodoMutation(
{
...todo,
done: e.target.checked,
},
{
onSuccess: (res) => {
setQueryData(
(prev) => ({
todos: prev?.todos.map((prevTodo) =>
prevTodo.id === res.id ? res : prevTodo
),
hasMore: prev?.hasMore,
}),
{ refetch: false }
)
},
}
)
}}
/>
<Link href={Routes.ShowTodoPage({ todoId: todo.id })}>
<a>{todo.text}</a>
</Link>
</li>
))}
</ul>
<button disabled={page === 0} onClick={goToPreviousPage}>
Previous
</button>
<button disabled={!hasMore} onClick={goToNextPage}>
Next
</button>
</div>
)
}
const TodosPage: BlitzPage = () => {
return (
<>
<Head>
<title>Todos</title>
</Head>
<div>
<p>
<Link href={Routes.NewTodoPage()}>
<a>Create Todo</a>
</Link>
</p>
<Suspense fallback={<div>Loading...</div>}>
<TodosList />
</Suspense>
</div>
</>
)
}
TodosPage.authenticate = true
TodosPage.getLayout = (page) => <Layout>{page}</Layout>
export default TodosPageIt works fantastically, but with one problem, it sends two request, a
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Ah, I see, it is because of the too-aggressive setup from react query, give that paginated-query a |
Beta Was this translation helpful? Give feedback.
Ah, I see, it is because of the too-aggressive setup from react query, give that paginated-query a
{ staleTime: 9000 }solved the problem