Is it possible to update data after mutation without using useQuery hook higher up in the tree?

[PiotrFidurski]

Hello I know that the title might be confusing/misleading, so I'll try to explain. I have a simple component that gets an array of data from the server, maps to post components and each of them can be liked/disliked by users. My question is, can I do something like:

https://codesandbox.io/s/hardcore-morning-jgi4h?file=/components/PostContainer.js

function Home({
  posts,
}: 
InferGetServerSidePropsType<typeof getServerSideProps>) {

  return (
    <>
      <div
        css={{
          display: "flex",
          flexGrow: 1,
          justifyContent: "space-between",
          position: "relative",
          alignItems: "flex-start",
          [mQ("1000")]: { flexDirection: "column", alignItems: "center" },
        }}
      >
        <>
          <Feed posts={posts} />
        </>
      </div>
    </>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery("posts", async () => {
    const postsResponse = await fetch("http://localhost:3000/api/posts", {
      method: "GET",
    });
    return await postsResponse.json();
  });

  const withKeys: any = [];
  dehydrate(queryClient).queries.forEach(
    (query) =>
      (withKeys[query.queryKey as any] = (query.state.data as any).data)
  );

  return {
    props: {
      posts: withKeys["posts"],
      // sending data directly instead of dehydratedState: dehydrate(queryClient),
      users: users.data,
    },
  };
};

The data is available and all that, but when using useMutation with onSuccess hook the data doesnt get updated, only after refresh/location change.

  const mutation = useMutation(() => likePost(post._id), {
    onSuccess: () => {
      queryClient.invalidateQueries("posts");
    },
  });

I'm assuming its because we only prefetched query in getServerSideProps and never used useQuery hook from within Home component, is it possible to mutate data without using useQuery hook higher up in the tree?

[TkDodo]

Are you hydrating the queryClient on the frontend?

[PiotrFidurski]

Oh, I'm sending dehydratedState: dehydrate(queryClient) in my actual code, I commented it out in the example because I thought it'd help to explain what I'm trying to do, my actual code looks pretty much like what the docs say, and everything works perfectly when I add useQuery hook to Home component, I even changed from queryClient.invalidateQueries("posts") to setQueryData to not waste network call.

queryClient.setQueryData("posts", (posts: any) => {
        return {
          ...posts,
          data: posts.data.filter((p: any) => {
            if (p._id === post._id) {
              p.likes = data.data.likes;
              p.likesCount = data.data.likesCount;
              return p;
            }
            return p;
          }),
        };
      });

[TkDodo]

okay, then I don't really know. Can you put your code in a codesandbox?

[PiotrFidurski]

Sure, do note that I don't do any API calls but the behavior I'm talking about is there https://codesandbox.io/s/hardcore-morning-jgi4h?file=/components/PostContainer.js

[TkDodo]

thank you, but I don't understand the issue. It seems the rehydration works, and then you can work with the query cache. If you send props down manually and just access them via props.posts, they are not tied at all to the query cache and will thus not update when you update something in the query cache...

[PiotrFidurski]

ah, that's what I thought, this question was more of a "what if" rather than an issue with something, Thanks for answering and your time. 👍