Using SolidJS context in async function

Question

Is it possible to get the context value in an async function called from a component?

Even runWithOwner() gives me the default value of the context, not the enclosing value, after the first await.

  const Ctx = createContext('default');
  return <Ctx.Provider value={'not-default'} >{
    (() => {
      runWithOwner(getOwner()!, async () => {
        const f = async () => {};
        console.log('before', useContext(Ctx));
        await f();
        console.log('after', useContext(Ctx));
      });
      return '';
    })()
  }</Ctx.Provider >;

Tried enclosing the async call in runWithOwner()

Update: I 'solved' it by using signals instead of context. It's an import of a global variable either way, but signals work...

  const [Sig, setSig] = createSignal('default');
  const Ctx = createContext('default');
  const f = async (where: string) => {
    console.log(where, 'ctx', useContext(Ctx), 'sig', Sig());
  };
  return <Ctx.Provider value={setSig('not-default')} >{
    (() => {
      (async () => {
        await f('first');
        await f('broken');
      })();
      return '';
    })()
  }</Ctx.Provider >;

snnsnn · Accepted Answer · 2023-03-31T13:50:12.240

1

Context value is not a signal but an object property that resides on the current owner, so accessing it in an async function is not a problem and does not require runWithOwner.

The problem is you are capturing the value inside an async scope before setting a new value through Ctx.Provider. Try accessing it through a variable, you will get the updated value.

import { createContext, useContext } from 'solid-js';
import { render } from 'solid-js/web';

const Ctx = createContext('default');

const Comp = () => {
  const cxt = useContext(Ctx);
  const run = () => {
    setTimeout(() => console.log(cxt), 1000);
    return null;
  }
  return run();
};

export const App = () => {
  return (
    <Ctx.Provider value={'not-default'} >
      <div>{useContext(Ctx)}</div>
      <Comp />
    </Ctx.Provider>
  );
};

render(() => <App />, document.body);

https://playground.solidjs.com/anonymous/ab5ca23c-9551-416e-8e37-ef2c50d20ab1

edited Mar 31 '23 at 13:50

answered Mar 07 '23 at 00:30

snnsnn

10,486
4
39
44

Yes, but the problem is now I need to pass the context as an explicit argument all over the place. I wanted the async function 4 levels down to use useContext(Ctx) instead of getting the context as a function parameter. – Jay Mar 07 '23 at 03:42
Your mention of signals steered me to a workable workaround. Thanks. – Jay Mar 07 '23 at 04:16
@Jay Sorry but your use case does not make sense. Why would you need an async function to render a component. It gives me a feeling that your app logic is seriously flawed. Is it for fetching data? If so, check this out https://stackoverflow.com/a/74590574/7134134 – snnsnn Mar 07 '23 at 06:58
the async function is not rendering a component; it needs to pick up helper objects like apiCaller, etc from the context. – Jay Mar 09 '23 at 00:51

Using SolidJS context in async function

1 Answers1