ellers Posts - Answer Overflow

ellers

•Created by ellers on 5/8/2025 in #support

Async Context and Store using route param

I'm sure the answer to this will be deceptively simple but I can't figure it out. In my SolidStart project, a user navigates to a "project" by route, e.g. /project/foo. The file is /project[key].tsx and using const params = useParams() can retrieve params.key perfectly. The next step was:

  const projectQuery = createAsync(() =>
    api.projects.project.query({ key }) // tRPC, works fine
  );

  const projectQuery = createAsync(() =>
    api.projects.project.query({ key }) // tRPC, works fine
  );

This works great and I can then use <Suspend> and friends and project data renders when available. BUT as you can imagine, the loaded project data and operations on that data are needed deeply throughout the page. To avoid prop drilling I want to make a Context that provides a Store to provide both the data and the operations. At the top-level this reads fine:

export default function ProjectDetail() {
  const params = useParams(); // Keep params for projectKey to Provider
  return (
    <ProjectProvider key={params.key}>
      <PageContentsGoesHere />
    </ProjectProvider>
  );
}

export default function ProjectDetail() {
  const params = useParams(); // Keep params for projectKey to Provider
  return (
    <ProjectProvider key={params.key}>
      <PageContentsGoesHere />
    </ProjectProvider>
  );
}

That provider is drafted as below... I know it's not right but I don't know how to get the data returned by createAsync to updated or set into the context:

export const ProjectProvider: ParentComponent<{ key: string }> = (props) => {
  // make an empty context
  const ctx = makeProjectContext()
  const projectQuery = createAsync(() =>
    // This works but the data needs to get into the store somehow!
    api.projects.project.query({ key: props.key })
  )
  return (
    <ProjectContext.Provider value={ctx}>
      {props.children}
    </ProjectContext.Provider>
  )
}

export const ProjectProvider: ParentComponent<{ key: string }> = (props) => {
  // make an empty context
  const ctx = makeProjectContext()
  const projectQuery = createAsync(() =>
    // This works but the data needs to get into the store somehow!
    api.projects.project.query({ key: props.key })
  )
  return (
    <ProjectContext.Provider value={ctx}>
      {props.children}
    </ProjectContext.Provider>
  )
}

I know that createAsyncStore exists but I don't understand what it returns and how to use it in a context. Any help most appreciated!

13 replies

Gaming

Programming