SolidJS•9mo ago

computations created outside ... in a Context

I am creating a context, largely following the pattern indicated here: https://docs.solidjs.com/reference/component-apis/create-context However in said context I want to store a set of values that get initialized through createResource. Because of that I get the computations created outside... warning. This is because basically all the resources are being created at the module level (don't see how else to apply the createContext pattern) and hence as soon as I import the module, which is being done outside of createRoot or render I get the warning. Is there a way to either import the module inside of the createRoot / render or a different way I could wrapper my context so I don't get this issue? Here is a snippet of the context module:


interface WalletContextDetails {
    wallet: Accessor<EIP6963ProviderDetail | undefined>,
    walletProviders: Accessor<EIP6963ProviderDetail[] | undefined>,
    activeProvider: Resource<Provider | undefined>,
}

const [selectedWallet, setSelectedWallet] = createSignal<EIP6963ProviderDetail>()

const providers = subscribeForWalletProviders();

const GetProvider = async() => {
    let provider: Provider;

    provider = ethers.getDefaultProvider()
    return provider;
}

const [provider] = createResource(selectedWallet, GetProvider);

const value: WalletContextDetails = {
    wallet: selectedWallet,
    activeProvider: provider
}

const WalletContext = createContext<WalletContextDetails>(value);

export function WalletContextProvider(props: ParentProps) {
    return (
        <WalletContext.Provider value={value}>
            {props.children}
        </WalletContext.Provider>
    );
}

export function useWalletContext() { return useContext(WalletContext); }

3 Replies

bigmistqke•9mo ago

don't see how else to apply the createContext pattern

Something like

const WalletContext = createContext<WalletContextDetails | undefined>(undefined)

const useWalletContext = () => {
  const context = useContext(WalletContext)
  if(!context) throw 'useWalletContext should be used inside WalletContextProvider'
  return context
}

export function WalletContextProvider(props: ParentProps) {
    const [provider] = createResource(selectedWallet, GetProvider)
    const value: WalletContextDetails = {
      wallet: selectedWallet,
      activeProvider: provider
    }
    return (
        <WalletContext.Provider value={value}>
            {props.children}
        </WalletContext.Provider>
    );
}

const WalletContext = createContext<WalletContextDetails | undefined>(undefined)

const useWalletContext = () => {
  const context = useContext(WalletContext)
  if(!context) throw 'useWalletContext should be used inside WalletContextProvider'
  return context
}

export function WalletContextProvider(props: ParentProps) {
    const [provider] = createResource(selectedWallet, GetProvider)
    const value: WalletContextDetails = {
      wallet: selectedWallet,
      activeProvider: provider
    }
    return (
        <WalletContext.Provider value={value}>
            {props.children}
        </WalletContext.Provider>
    );
}

(+ discord/markdown tip: u can do syntax highlighting and block-comments with ```jsx)

MikeM42OP•9mo ago

This worked great! Thank you for the help!

bigmistqke•9mo ago

ur welcome!

Gaming

Programming

computations created outside ... in a Context