max
max
PostsComments
SSolidJS
Created by max on 3/19/2024 in #support
Mutate data for optimistic updates with createAsync
When using createResource you can use the mutate() function to update the value directly for optimistic updates. Is there a way to do this when using createAsync? For example in this example, I'd like to optimistically update the name() before I call my api function to update it. 
const loadAboutData = cache(async () => {
  return new Promise((resolve) =>
    setTimeout(resolve, 500, "Solid")
  ) as Promise<string>;
}, "about");


export default function About() {
  const name = createAsync(() => loadAboutData());
  return (
    <section class="p-8">
      <Suspense fallback={<p>...</p>}>
        <p>{name()}</p>
      </Suspense>
      <button
        onClick={() => {
          // optimistically update the dat
           mutate((name) => “UpdatedName”)
         // api call to update
        }}>
        Test
      </button>
    </section>
  );
}
const loadAboutData = cache(async () => {
  return new Promise((resolve) =>
    setTimeout(resolve, 500, "Solid")
  ) as Promise<string>;
}, "about");


export default function About() {
  const name = createAsync(() => loadAboutData());
  return (
    <section class="p-8">
      <Suspense fallback={<p>...</p>}>
        <p>{name()}</p>
      </Suspense>
      <button
        onClick={() => {
          // optimistically update the dat
           mutate((name) => “UpdatedName”)
         // api call to update
        }}>
        Test
      </button>
    </section>
  );
}
14 replies