SolidJS•10mo ago

How to make optimistic update using solidjs?

Currently I do not have any code for optimistic update. I need simple example for this considering below code.

import { createSignal } from "solid-js";

// Simulated asynchronous function to update data on the server
function updateDataOnServer(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // Simulating server response
      resolve(newData);
    }, 1000); // Simulating network delay
  });
}

function App() {

  const [data, setData] = createSignal("");

  const handleUpdate = async () => {

  };

  return (
    <div>
      <input
        type="text"
      />
      <button onClick={handleUpdate}>Update Data</button>
      <div>
        <h1>{data() || "No Data"}</h1>
      </div>
    </div>
  );
}

export default App;

import { createSignal } from "solid-js";

// Simulated asynchronous function to update data on the server
function updateDataOnServer(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // Simulating server response
      resolve(newData);
    }, 1000); // Simulating network delay
  });
}

function App() {

  const [data, setData] = createSignal("");

  const handleUpdate = async () => {

  };

  return (
    <div>
      <input
        type="text"
      />
      <button onClick={handleUpdate}>Update Data</button>
      <div>
        <h1>{data() || "No Data"}</h1>
      </div>
    </div>
  );
}

export default App;

I found this article but can not find document for createMutation - https://github.com/solidjs/solid/discussions/770

GitHub

RFC - Mutation Primitive · solidjs solid · Discussion #770

Summary In this RFC I'm looking for feedback on the potential of a core Mutation primitive. While nothing being proposed could not be done in user-land, there is a good argument for establishin...

2 Replies

Raqueebuddin Aziz•10mo ago

import { render } from "solid-js/web";
import { createSignal, createResource, Show, Suspense } from "solid-js";

async function double(n: number) {
  return await new Promise<number>((resolve) =>
    setTimeout(() => resolve(n * 2), 2000)
  );
}

function Counter() {
  const [count, setCount] = createSignal(1);
  const [doubleCount, { refetch, mutate }] = createResource(count, (count) =>
    double(count)
  );
  const increment = () => setCount(count() + 1);

  return (
    <>
      <button type="button" onClick={increment}>
        {count()}
      </button>
      <Suspense fallback={<div>Optimistic: {count() * 2}</div>}>
        <Show when={doubleCount()}>
          <div>{doubleCount()!}</div>
        </Show>
      </Suspense>
    </>
  );
}

render(() => <Counter />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal, createResource, Show, Suspense } from "solid-js";

async function double(n: number) {
  return await new Promise<number>((resolve) =>
    setTimeout(() => resolve(n * 2), 2000)
  );
}

function Counter() {
  const [count, setCount] = createSignal(1);
  const [doubleCount, { refetch, mutate }] = createResource(count, (count) =>
    double(count)
  );
  const increment = () => setCount(count() + 1);

  return (
    <>
      <button type="button" onClick={increment}>
        {count()}
      </button>
      <Suspense fallback={<div>Optimistic: {count() * 2}</div>}>
        <Show when={doubleCount()}>
          <div>{doubleCount()!}</div>
        </Show>
      </Suspense>
    </>
  );
}

render(() => <Counter />, document.getElementById("app")!);

there are more than one way to do optimistic updates but the general steps are: - create the optimistic state - show it while loading - once loaded, if no error use normal state and destroy optimistic state - if error, show error

iNdraOP•10mo ago

thank you for information.

Gaming

Programming

How to make optimistic update using solidjs?