How can I get data from my useContext component into a server component?

[hardy pagoda]

I have a context component that is a use client component and I need to pass the data into a top level page.tsx file in order to fetch data from my Sanity DB. I can't use useContext as that requires it to be a client component

//@/context/DataContext.tsx
'use client'
 
import { createContext, useEffect, useState } from "react";
import { useSupabaseClient } from "@supabase/auth-helpers-react";

 
export const DataContext = createContext({})
 
export default function ThemeProvider({ children }) {
  const [data, setData] = useState()
  const supabase = useSupabaseClient();


  useEffect(() => {
    //do something to get data like
    supabase.from('table')
      .select()
      .then(result => {
        setData(result.data)
      })
   
  }, [])

  return <DataContext.Provider value={data}>{children}</DataContext.Provider>
}

[brittle pike]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[minor bobcat]

yeah not sure that's possible. what you can do is run all the logic in a client component and import it into your server component. the docs say this - In Next.js 13, context is fully supported within Client Components, but it cannot be created or consumed directly within Server Components.