can you share the code of the page, where you're rendering that New project

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between" >
<Suspense>
<ProjectContent />
</Suspense>
</main>
);
}


function ProjectContent() {
const searchParams = useSearchParams()
const id = searchParams.get('id')
if (!id) {
return #Unknown Channel</>
}
return <DashboardProvider projectId={id}>

<VideoPlayerProvider>

<Dashboard />
</VideoPlayerProvider>
</DashboardProvider>
}

@The Demon Queen ^

hmm, so what is the issue you are facing here? I don't think you need to do a router.refresh to show a new page

it's like, for some reason, my DashboardProvider isn't reacting when the searchParams.get('id') changes. Or maybe useSearchParams isnt reacting.

For whatever reason, none of the page content changes

pretty sure useSearchParams should work, can you share the DashboardProvider code?

is that context?

yeah its context .


const DashboardContext = createContext<DashboardContextType | undefined>(undefined);

export const useDashboardData = () => {
const context = useContext(DashboardContext);
if (context === undefined) {
throw new Error('useDashboardData must be used within a DashboardProvider');
}
return context;
};

export const DashboardProvider: React.FC<{ children: React.ReactNode, projectId: string }> = ({ children, projectId }) => {
const [dashboardData, setDashboardData] = useState<DashboardData>({
/// DATA
});


const [trigger, setTriggerRefresh] = useState<boolean>(false)

const [loading, setLoading] = useState<boolean>(false)


const triggerRefresh = () => {
console.log(triggerRefresh - Setting trigger from ${trigger} to ${!trigger})
setTriggerRefresh(prevTrigger => !prevTrigger)
}

useEffect(() => {
const fetchData = async () => {

console.log("dashboard_provider - fetchData")

if (loading) {
console.log("Loading already in progress")
return
}
setLoading(true)
try {
const response = await fetch(process.env.NEXT_PUBLIC_SERVER_ENDPOINT + api/dashboard?id=${projectId});
const data = await response.json();
setDashboardData(data);

} catch (error) {
console.error('Failed to fetch dashboard data:', error);
} finally {
setLoading(false)
}
};

fetchData();
}, [trigger]);


return (
<DashboardContext.Provider value={{ dashboardData, setDashboardData, triggerRefresh, projectId, loading }}>
{children}
</DashboardContext.Provider>
);
};

Now that we are talking this over, I am suspicious of that useEffect call. I wonder if I need to make it react to [trigger, projectId]

I didnt even know about react-query.

this thing? https://tanstack.com/query/latest

yeah, I use that for fetching data when I am just using react, in Next.js just use Next.js SSR

yeah I'll check that out for sure , thanks!