Next.js Discord

Discord Forum

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

Unanswered
Chum salmon posted this in #help-forum
Open in Discord
Avatar
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

Avatar
Dayo
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