How can I get data from my useContext component into a server component?
Unanswered
Chum salmon posted this in #help-forum
Chum salmonOP
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>
}
2 Replies
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.
but it looks like you're dealing with the user's data. isn't it possible to get that directly from an api call such that you can use your data directly in your server component