25 replies

How to refetch data after Clerk login?

<SignInButton>
  <button>
    Sign in
  </button>
</SignInButton>

<SignInButton>
  <button>
    Sign in
  </button>
</SignInButton>

<SignInButton>
  <button>
    Sign in
  </button>
</SignInButton>

<SignInButton>
  <button>
    Sign in
  </button>
</SignInButton>

Problem: data is stale after authentication change.
I need a way to invalidate data (tRPC) after login/logout. Clerk doesn't seem to give you a way to manually control login-logout. They give you prebuilt SignInButton/SignOutButton but you can't control it.
I tried using useEffect with {isSignIn} = useUser() but it only worked with sign-out and not sign-in.

Solution

Update your middleware matcher

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
    "/"
  ],
};

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
    "/"
  ],
};

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
    "/"
  ],
};

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
    "/"
  ],
};

Jump to solution

How to refetch data after Clerk login?

Similar Threads

Similar Threads

Similar Threads