S
SolidJS8mo ago
iNdra

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
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
iNdra
iNdra8mo ago
thank you for information.
Want results from more Discord servers?
Add your server