Theo's Typesafe Cult•14mo ago

How to refetch data after Clerk login?

<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 ```tsx export const config = { matcher: [...

Jump to solution

13 Replies

James Perkins•14mo ago

Clerk gives you plently of ways to check login status and even how to log out. useAuth has: isSignedIn <-- will be false on sign out. signOut <-- a way to sign out userId <-- will be null on sign out. and not when you are logged in. useClerk() gives you access to every low level part of Clerk. Maybe describe what you actually want? The code snippet you have is just a way to sign in so not sure that is relevant. If you want to handle your own flows to sign in. useSignIn useSignUp Then you can do conditional fetches if that is what you are asking:

const { userId } = useAuth();
  const hello = api.example.hello.useQuery({ text: "from tRPC" }, { enabled: !!userId });

const { userId } = useAuth();
  const hello = api.example.hello.useQuery({ text: "from tRPC" }, { enabled: !!userId });

Apestein•14mo ago

When I sign-in/sign out with the <SignInButton>/<SignOutButton>, my trpc data is isn't updated. So I need something like this.

function handleSignIn() {
  signIn()
  void ctx.example.invalidate()
}
<SignInButton>
  <button onClick={handleSignIn}>
    Sign in
  </button>
</SignInButton>

function handleSignIn() {
  signIn()
  void ctx.example.invalidate()
}
<SignInButton>
  <button onClick={handleSignIn}>
    Sign in
  </button>
</SignInButton>

I also tried useEffect like this. This only works for sign-out however.

const {isSignIn} = useAuth()
useEffect(()=> {
  void ctx.example.invalidate()
},[isSignIn])

const {isSignIn} = useAuth()
useEffect(()=> {
  void ctx.example.invalidate()
},[isSignIn])

Basically after the redirect from clerk sign-in page I need to invalidate data Although I don't understand why it doesn't do that automatically since it should be similar to a full page refresh

James Perkins•14mo ago

 const { userId, } = useAuth();
  useEffect(() => {
    console.log("firing")
  }, [userId])

 const { userId, } = useAuth();
  useEffect(() => {
    console.log("firing")
  }, [userId])

This fires every single time the state changes, userId or userId becomes null. Clerk doesn't full refresh on a sign out, nor really on sign in depending on how you are doing signin. Same for this:

 const { isSignedIn, } = useAuth();
  useEffect(() => {
    console.log("firing")
  }, [isSignedIn])

 const { isSignedIn, } = useAuth();
  useEffect(() => {
    console.log("firing")
  }, [isSignedIn])

Apestein•14mo ago

same problem, it only works on sign-out

James Perkins•14mo ago

Both of those work on sign in and sign out. Why don't you give the full code example that you are trying

Apestein•14mo ago

https://github.com/Apestein/chirp in: https://github.com/Apestein/chirp/blob/main/src/components/layout.tsx okay this is little weird, problem exist on dev build only the production updates fine on my dev build the hearts don't update when I log-in

Solution

James Perkins•14mo ago

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).*)",
    "/"
  ],
};

James Perkins•14mo ago

So your tRPC routes run correctly. I see useEffect firing correctly

Apestein•14mo ago

yeah that fixed it

Apestein•14mo ago

been trying to fix this one for awhile, thanks i was following theo tutorial, that's why i had that matcher

James Perkins•14mo ago

Yeah no worries... I work at Clerk so happy to help 😄

Apestein•14mo ago

I couldn't find any documentation on it. Could you point me to the docs if they exist And it seem to work fine here: https://github.com/t3dotgg/chirp/blob/main/src/middleware.ts And also on clerk: https://clerk.com/docs/nextjs/middleware

James Perkins•14mo ago

https://clerk.com/docs/nextjs/trpc

TRPC | Clerk

Learn how to integrate Clerk into your Next.js with TRPC

Gaming

Programming

How to refetch data after Clerk login?