Revision history [back]

To utilize SolidJS context in an asynchronous function, you first need to obtain the context. You can do this using the useContext hook.

For example, let's say you have a context called MyContext:

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

const MyContext = createContext({ foo: 'bar' });

function MyComponent() {
  const context = useContext(MyContext);

  return (
    <div>{context.foo}</div>
  );
}

Now let's say you have an asynchronous function that needs to access the context:

async function myAsyncFunction() {
  const context = useContext(MyContext);

  const result = await fetch('/some-api-endpoint', {
    headers: {
      'Authorization': `Bearer ${context.token}`
    }
  });

  // do something with the result
}

However, this will not work because you cannot use hooks inside asynchronous functions. One solution is to obtain the context outside the function and pass it as a parameter:

async function myAsyncFunction(context) {
  const result = await fetch('/some-api-endpoint', {
    headers: {
      'Authorization': `Bearer ${context.token}`
    }
  });

  // do something with the result
}

function MyComponent() {
  const context = useContext(MyContext);

  async function handleButtonClick() {
    await myAsyncFunction(context);
  }

  return (
    <button onClick={handleButtonClick}>Call API</button>
  );
}

In this example, we obtain the context inside the component and pass it as a parameter to the asynchronous function. This allows us to utilize the context inside the function.