🧩 Plasmo Developers•14mo ago

How to use Plasmo's globalProvider?

For tanstack query, I need to have a global provider for all of the getInlineAnchorList(). I saw that this should be possible through this github pull but I haven't been able to get it to work. Does anyone have a working example? https://github.com/PlasmoHQ/plasmo/pull/557

GitHub

feat: Layout or globalProvider for React runtime by louisgv · Pull ...

Details This PR introduces a new getGlobalProvider function for React runtime. This function is aliased with Layout to align with some convention from other framework. Thus, user can either do as t...

3 Replies

bret_pat•14mo ago

So it seems like _app.tsx might not have been implemented? Er, so I'm using

export const Layout = ({ children }) => {
  return <GlobalProvider>{children}</GlobalProvider>
}

export const Layout = ({ children }) => {
  return <GlobalProvider>{children}</GlobalProvider>
}

But what ends up happening for getInlineAnchorList(...), is that a new Layout is created for each one rather than just sharing between all of them

bret_pat•14mo ago

I can confirm that a new GlobalProvider is created for each rather than a single global layout

bret_pat•14mo ago

MY use case was for React query and there is a work-around for this. Since QueryClient is just a generic javascript object, you can create that object once globally and then just pass that in as a prop. This makes it only a single TRPC call is made for all the mounted components instead of for each

Gaming

Programming

How to use Plasmo's globalProvider?