setQueryData Re-Render Causes Flickering, How can i fix this?

[winner106]

I am working on an Admin project using 'blitz' , for managing the database tables. When I make a list of users, I want to switch the state of a user, but this causes the entire UserList Component to be re-rendered. Some code I'm currently using is as follows:

const [{ users, count }, { setQueryData, isLoading }] = usePaginatedQuery(getUsers, {
    orderBy: { id: "asc" },
    skip: ITEMS_PER_PAGE * (page - 1),
    take: ITEMS_PER_PAGE,
  })

const [updateUserMutation, { isLoading }] = useMutation(updateUser, {
    onSuccess: async (user) => {
      await setQueryData(user)
      if (user.status) {
          console.log('user activated')
        })
      } else {
         console.log('user deactivated')
      }
    },
  })

  // The following code is used to associate state-switching functions for each user
const activateUser = () => updateUserMutation({ ...user, status: true })
const deactivateProduct = () => updateProductMutation({ ...product, status: false })

The UI looks like this: ( the whole UserList Component will flickering)

I don't want to re-render the entire component, is there any way get it done?

If I were using React-Query, I would probably use the following solution:

But I wonder if there is a similar solution in Blitz? Thanks for any help ~

[beerose]

setQueryData invalidates the query and causes a refetch (hence the re-render). If the refetch isn't necessary in your case you could pass {refetch: false} as setQueryData's options (haven't tried that, but from the docs it seems it can help). Otherwise, you can extract the part of the component that needs data, so that only the smaller part will re-render.