10 replies

Invalidating a single part of a larger query

I am fetching data as such

  const postQuery = api.primaryRouter.getPosts.useQuery({});

  const postQuery = api.primaryRouter.getPosts.useQuery({});

and rendering as a list.

I would like to invalidate JUST a single ID, this is possible via scenario #3 here https://trpc.io/docs/reactjs/usecontext#invalidating-across-whole-routers

For example, if I later update one of the posts, I update then fetch just the updated post as follows -

    userMutation.mutate(
      {
        id,
        increment,
      },
      {
        onSuccess: () => {
          console.log("success");
          utils.primaryRouter.getPosts
            .invalidate({
              id,
            })
            .catch((err) => {
              console.log(err);
            });
        },
      }
    );

    userMutation.mutate(
      {
        id,
        increment,
      },
      {
        onSuccess: () => {
          console.log("success");
          utils.primaryRouter.getPosts
            .invalidate({
              id,
            })
            .catch((err) => {
              console.log(err);
            });
        },
      }
    );

Now the problem is, as I never used an ID to fetch posts to begin with, that query doesn't get invalidated (as the tag is different). I'm not entirely sure what the correct way to optimally update just a single record in a "fetch all" type query is?

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...

TTC

Theo's Typesafe Cult•3y ago•

10 replies

Yoers

Invalidating a single part of a larger query

I am fetching data as such

  const postQuery = api.primaryRouter.getPosts.useQuery({});

  const postQuery = api.primaryRouter.getPosts.useQuery({});

    userMutation.mutate(
      {
        id,
        increment,
      },
      {
        onSuccess: () => {
          console.log("success");
          utils.primaryRouter.getPosts
            .invalidate({
              id,
            })
            .catch((err) => {
              console.log(err);
            });
        },
      }
    );

    userMutation.mutate(
      {
        id,
        increment,
      },
      {
        onSuccess: () => {
          console.log("success");
          utils.primaryRouter.getPosts
            .invalidate({
              id,
            })
            .catch((err) => {
              console.log(err);
            });
        },
      }
    );

useContext | tRPC

Invalidating a single part of a larger query

Invalidating a single part of a larger query

Similar Threads

Similar Threads

Similar Threads