T
tRPC

problem with useContext (likely easy fix)

problem with useContext (likely easy fix)

Ttoadmilk
View on Discord
7/4/2023
function userCard(
  user: {
    id: string;
    name: string | null;
    image: string | null;
  },
  id: string,
) {

  const toggleFollow = toggleFollowFunc(user.id);

  return (
    <div className="flex items-center gap-4">
      ...
      <FollowButton
        isFollowing={true} //TODO: Fix this
        isLoading={toggleFollow.isLoading}
        userId={id}
        onClick={() => toggleFollow.mutate({userId: id})}
      />
    </div>
  );
}

export const toggleFollowFunc = (id: string) => {
  const trpcUtils = api.useContext();
  return api.profile.toggleFollow.useMutation({
    onSuccess: ({ addedFollow }) => {
      trpcUtils.profile.getById.setData({ id }, (oldData) => {
        if (oldData == null) return;

        const countModifier = addedFollow ? 1 : -1;
        return {
          ...oldData,
          isFollowing: addedFollow,
          followersCount: oldData.followersCount + countModifier,
        }
      })
    }
  });
}
function userCard(
  user: {
    id: string;
    name: string | null;
    image: string | null;
  },
  id: string,
) {

  const toggleFollow = toggleFollowFunc(user.id);

  return (
    <div className="flex items-center gap-4">
      ...
      <FollowButton
        isFollowing={true} //TODO: Fix this
        isLoading={toggleFollow.isLoading}
        userId={id}
        onClick={() => toggleFollow.mutate({userId: id})}
      />
    </div>
  );
}

export const toggleFollowFunc = (id: string) => {
  const trpcUtils = api.useContext();
  return api.profile.toggleFollow.useMutation({
    onSuccess: ({ addedFollow }) => {
      trpcUtils.profile.getById.setData({ id }, (oldData) => {
        if (oldData == null) return;

        const countModifier = addedFollow ? 1 : -1;
        return {
          ...oldData,
          isFollowing: addedFollow,
          followersCount: oldData.followersCount + countModifier,
        }
      })
    }
  });
}
could someone please explain what im doing wrong thats giving me this error? cheers
Ttoadmilk
View on Discord
7/4/2023
it was working before when you could just follow one person on their profile but now that I am trying to add the option to follow their followers as well it breaks
T.traevelliath
View on Discord
7/5/2023
It's actually pretty simple to fix: just move trpcUtils declaration outside of a function. You should probalby get the desired data inside a component and pass it as a prop.

Looking for more? Join the community!

T
tRPC

problem with useContext (likely easy fix)

Join Server
Recommended Posts
I think i found an TRPC BUGI am using TRPC With Fastify and bun (node.js alternative) if you try to call any .mutation route thuseMutation in useEffect dependency array causes infinite loopI had a very unexpected issue today when testing out some code. I have a simple `sum` method in tRPChow does batching work?My understanding is that batching basically combines multiple requests in a single network request, Links vs MiddlewaresWhat is the difference between a middleware and a link? These two seems to behave the same?Setting up tRPC with Supabase and DrizzleHi! 😄 Is there someone that has any recommendations on how I should setup tRPC with Supabase Auth aRequests running multiple times after it's failing