SolidJS•11mo ago•

12 replies

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

/project[key].tsx

and using

const params = useParams()

const params = useParams()

can retrieve

params.key

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>

<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

Context

that provides a

Store

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

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

createAsyncStore

exists but I don't understand what it returns and how to use it in a context.

Any help most appreciated!

SolidJS•11mo ago•

12 replies

ellers

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

/project[key].tsx

and using

const params = useParams()

const params = useParams()

can retrieve

params.key

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>

<Suspend>

Context

Context

that provides a

Store

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

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

createAsyncStore

exists but I don't understand what it returns and how to use it in a context.

Any help most appreciated!

Async Context and Store using route param

Similar Threads

Async Context and Store using route param

Similar Threads

Similar Threads

Similar Threads