How can we build a component library using RSCs that allows the user to BYO data fetching function? What is the alternate approach where a context provider would otherwise be used?

[dwjohnston]

I maintain a library called react-github-permalink - where the basic usage is you give it a github permalink and it displays a code block:

<GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5"/>

Its relevant implementation looks like this:

https://github.com/dwjohnston/react-github-permalink/blob/b4ed5a9bca5e085ca313470ad9e8fd4f570c2721/src/GithubPermalink/GithubPermalink.tsx#L13-L25

(Not sure why the code block isn't displaying, is that for issues only?)

export function GithubPermalink(props: GithubPermalinkProps) {

  const { permalink } = props;
  const [data, setData] = useState(null as null | GithubPermalinkDataResponse)
  const { getDataFn, githubToken, onError } = useContext(GithubPermalinkContext);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getDataFn(permalink, githubToken, onError).then((v) => {
      setIsLoading(false);
      setData(v);
    })
  }, [getDataFn, githubToken, onError, permalink])

Note two things:

• We use useEffect to handle the lifecycle of loading the data to success.
• We allow the behaviour of the component to be configured by a context provider - and the component reaches into the context to get its data fetching function, among other things.

This approach is working well, it's easy to configure at a global level and is convenient to use - but this won't work for an RSC.

Given that the primary usage of this component is for blogs we might as well be getting the benefits of static rendering.

Is there a guide or a first class approach for doing dependency injection like this?

I have done a quick experiment and doing something like this:

// src/app/layout.js

import {configProvider} from "my-component-library"; 

configProvider.setDataFetchingFn(async () => {
    // implementation here 
}); 

// the-component.js 
import {configProvider} from "./configProvider"; 
const dataFn = configProvider.getDataFetchingFn();
export async function MyComponent() {
       
    const data = await dataFn(); 

   // The rest
}

does seem to work.

I couldn't quite get typedi to work, but this approach is very much in the same vein.

Is there documentation somewhere as it relates to alternatives to context?

[dwjohnston]

NextJS's documentation does mention context providers here:

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers

But the answer is just add to make things client components. I'm really looking for configurability as it relates to components that can be rendered server side.

[dwjohnston]

One of the downsides of the approach I've mentioned is that it wouldn't have the same flexibility that a context provider has - in that there can only be one of them.

ie. where I could have a different context provider for pages /foo/* vs /bar/* - each having a different data fetching function, and the components down the tree just using the closet context provider.

Whereas in the solution I outlined there can only be one configuration provider, and attempts to set it elsewhere would just clobber the previous configuration.

Not a relevant concern for my use case, but worth mentioning.