T
TanStack•3y ago
sensitive-blue

Refreshing User Organizations with TanStack's useQuery and Clerk/Next.js Integration

Hello everyone! I'm building a Next.js application with Clerk, and it's really fantastic. However, I'm facing an issue with TanStack's useQuery. My idea is to create a hook to fetch the user's organizations, and I've named it useGetTeams. Here's the code: 
import { useOrganizationList } from '@clerk/nextjs';
import { useQuery } from '@tanstack/react-query';

export async function useGetTeams() {
  const { userMemberships } = useOrganizationList({
    userMemberships: {
      infinite: true,
    },
  });

  return useQuery({
    queryKey: ['get:teams'],
    queryFn: () => {
      return userMemberships.fetchNext;
    },
  });
}
import { useOrganizationList } from '@clerk/nextjs';
import { useQuery } from '@tanstack/react-query';

export async function useGetTeams() {
  const { userMemberships } = useOrganizationList({
    userMemberships: {
      infinite: true,
    },
  });

  return useQuery({
    queryKey: ['get:teams'],
    queryFn: () => {
      return userMemberships.fetchNext;
    },
  });
}
The main problem is that with TanStack, I'm creating a key for this request, and it becomes invalidated when I use a hook called createTeam. This should trigger a re-fetch of the organizations, but here's the issue: since useOrganizationList is a hook, when it becomes invalidated, the organizations are not re-fetched. I'm trying to achieve this using something like fetchNext, but it's not re-fetching the user's organizations. Any ideas on how to accomplish this with the Clerk/Next.js library? Thank you in advance!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?