Add provider component to context

Hi, is this an anti-pattern in Fresh?

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

Basically SomeProvider is attached to the ctx via middleware. Use-case is if you want to add server props coming from state. So instead of doing something like:

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

It improves DX since user-land wont have to do this anymore. Will it be unique to each request? And if yes, how would you update PageProps type?

4 Replies

marvinh.•13mo ago

The whole Fresh context object is unique for each request. so the state property hanging off of that is unique too

Donald BidenOP•13mo ago

Would you say the code above is anti-pattern? If not, should I put it to state instead? and how do I extend PageProps type?

import { define } from '../utils.ts';

export default define.page(function App({ Component, state }) {
  return (
    <html>
      <body>
        <state.SomeProvider someProp="hello">
          <Component />
        </state.SomeProvider>
      </body>
    </html>
  );
});

import { define } from '../utils.ts';

export default define.page(function App({ Component, state }) {
  return (
    <html>
      <body>
        <state.SomeProvider someProp="hello">
          <Component />
        </state.SomeProvider>
      </body>
    </html>
  );
});

looks good? Id love to attach it to ctx instead, but not sure how to type it

marvinh.•13mo ago

No, not an antipattern. Custom data is expected to be stored on ctx.state which passed through every route or layout

Donald BidenOP•13mo ago

Thanks! Would love to extend context type too btw! Is there a way to contribute to this?

Add provider component to context

Did you find this page helpful?