Next.js Discord

Discord Forum

best approach to store user data for in client side (want to get rid of react-query)

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
Right now, I only use react-query to get user data. So I want to get rid of it. What would be the best approach to get user data in client side if I need it in multiple components? 

export function useUser() {
  const userQueryFn = async () => {
    const supabase = supabaseClient();
    const { data, error } = await supabase.auth.getSession();
    
    if (data.session?.user) {
      const { data: user } = await supabase
        .from("user")
        .select("*, subscription(*)")
        .eq("id", data.session.user.id)
        .single();
      return user;
    }

    return initUser;
  };

  return useQuery({
    queryKey: ["user"],
    queryFn: userQueryFn,
  });
}
here's what I've rn. Dont mind subscription field
Answered by Barbary Lion
what about such approach ?
View full answer

4 Replies

@Barbary Lion Right now, I only use `react-query` to get user data. So I want to get rid of it. What would be the best approach to get user data in client side if I need it in multiple components? export function useUser() { const userQueryFn = async () => { const supabase = supabaseClient(); const { data, error } = await supabase.auth.getSession(); if (data.session?.user) { const { data: user } = await supabase .from("user") .select("*, subscription(*)") .eq("id", data.session.user.id) .single(); return user; } return initUser; }; return useQuery({ queryKey: ["user"], queryFn: userQueryFn, }); } here's what I've rn. Dont mind subscription field
B33fb0n3
why do you want to remove react query? You can easily do this with rq.

to get user data in client side if I need it in multiple components?
You can do that with the same query key in both components. If needed you already declared a function, that can also be shared. Like that you can the same result. And thought the invalidation of the react query they change excatly at the same time.

I prepared an example for you (with the profile picture): https://github.com/B33fb0n3/rq-profile-picture

However: if you really dont want to use react query, you can use an alternative like [SWR](https://swr.vercel.app/). That may suites you better
Answer
@Barbary Lion what about such approach ?
B33fb0n3
That looks more like SSR. I showed you one example in the repo that I shared
B33fb0n3
@Barbary Lion solved?