Theo's Typesafe Cult•2y ago

Handling memberships

Hi! We want to add memberships to our dashboard and hide specific sidebar menu options. What is best practice to handle these kind of things? Make a membership provider around the app? Or could I just call the api in the sidebar component

export function Sidebar({ className }: { className?: string }) {
  const pathname = usePathname();
  const { data } = api.user.subscriptionStatus.useQuery();

export function Sidebar({ className }: { className?: string }) {
  const pathname = usePathname();
  const { data } = api.user.subscriptionStatus.useQuery();

2 Replies

Neto•2y ago

ssr into context or "loading page" until you fetch the content necessary to create the sidebar

Ramsay•2y ago

this^ but you could also just call the query in the sidebar and only pop certain elements in when you have the membership status. There's really no "best practice", it depends on the UX you wanna have. Either way you def don't need a "membership provider" since you already have the query. The queryClient is your provider. Just call the query wherever it's needed. And make sure to not rely on the subscription status query alone to protect the options. Make sure you're validating the subscription status on the server as well.

Gaming

Programming

Handling memberships