T
tRPC

How to call useQuery with params inside JSX

How to call useQuery with params inside JSX

TTCI
View on Discord
3/21/2023
How can i achieve this? Thanks 
export function MemberQueryList({ list }: Props) {
  
function checkIsOwner(housingAssociationId: string, memberId: string) {
    const isOwner = trpc.housingAssociation.checkIfOwner.useQuery({
      housingAssociationId,
      memberId,
    });

    return isOwner.data?.ok ?? false;
  }
  const navigate = useNavigate();
  const userId = getSubFromLocalStorage() ?? "";
  return (
    <div>
      {list.map((housingAssociation: listData) => {
        const isOwner = checkIsOwner(housingAssociation.id, housingAssociation.userId);
        return (
          <BoardCard
            key={housingAssociation.id}
            onClick={() => {
              navigate(
                `/housing_associations/association?name=${housingAssociation.name}&id=${housingAssociation.id}`
              );
            }}
            state={housingAssociation}
            isOwner={isOwner}
          />
        );
      })}
    </div>
  );
}
export function MemberQueryList({ list }: Props) {
  
function checkIsOwner(housingAssociationId: string, memberId: string) {
    const isOwner = trpc.housingAssociation.checkIfOwner.useQuery({
      housingAssociationId,
      memberId,
    });

    return isOwner.data?.ok ?? false;
  }
  const navigate = useNavigate();
  const userId = getSubFromLocalStorage() ?? "";
  return (
    <div>
      {list.map((housingAssociation: listData) => {
        const isOwner = checkIsOwner(housingAssociation.id, housingAssociation.userId);
        return (
          <BoardCard
            key={housingAssociation.id}
            onClick={() => {
              navigate(
                `/housing_associations/association?name=${housingAssociation.name}&id=${housingAssociation.id}`
              );
            }}
            state={housingAssociation}
            isOwner={isOwner}
          />
        );
      })}
    </div>
  );
}
Mmozzius
View on Discord
3/21/2023
You’re not following the rules of hooks! https://legacy.reactjs.org/docs/hooks-rules.html In short, you should move your useQuery hook to inside <BoardCard> Basically, you can’t call a hook inside a loop (because react then can’t tell which one is which). So you need to move the logic to the top level of a component, and from the look of your code you should just pass userId to <BoardCard> and have it check isOwner inside there Also - you’ve written a function checkIsOwner. You can call hooks inside functions you write, but you must then treat that function like a hook. In your case, you’d want to rename it to useHousingAssocIsOwner(assocId, userId) and then move it to the top level of a component
TTCI
View on Discord
3/21/2023
Thank you for the clarification!

Looking for more? Join the community!

T
tRPC

How to call useQuery with params inside JSX

Join Server
Recommended Posts
Sharing EnumOn the backend: I have colocated files with types and procedures (index.ts - procedures, schemas.ts Meta - unable to create default metaTrying to follow https://trpc.io/docs/server/metadata#default-meta-chaining-and-shallow-merging I setrpc/react-query batchingHi. How do you deal with batching? If I don't put any maxURLLength then I get an error 404 since it middleware error with minimal-react examplehello! I tried to use the minimal-react version, but I get an error - it says that `'middleware'` dohow to use the same Zod validation both client and server's procedure inputWhen submitting forms, I need the same validation. How to reduce the repeated code?pipe/unstable_pipeI cant seem to find it? according to the docs I can chain middlewares using pipe in v10 but the featImplementation of bi-directional cursor-based paginationI'm looking at the [example](https://trpc.io/docs/useInfiniteQuery#example-react-component) for `useHow to ignore `input` validation and just pass in an object with interfaces?For my input I just want to pass in an interface rather than using a Zod schema. Either that or if sWhere can I add a query key?I tried to follow as in useQuery from Tanstack, but Typescript started complaining ```js api.promptsasync inside link next handler possible ?Hey everyone, Today I had to do a bit of refactor, and I'm wondering something. I had to turn a syntRPC doesn't support redirectI use tRPC & @trpc/server/adapters/express. procdure.query({ctx: { res }} => { res.redirect('xxHow to get external key other than INPUT from RESTFUL request?SSO callback my api like api/trpc/user.login?token=abc