My پچھلے پیغام SvelteKit کا ایک وسیع جائزہ تھا جہاں ہم نے دیکھا کہ یہ ویب ڈویلپمنٹ کے لیے کتنا بہترین ٹول ہے۔ یہ پوسٹ ہم نے وہاں جو کچھ کیا اس کو ختم کردے گا اور ہر ڈویلپر کے پسندیدہ موضوع میں غوطہ لگائے گا: کیشنگ. لہذا، اگر آپ نے پہلے سے نہیں پڑھی تو میری آخری پوسٹ کو ضرور پڑھیں۔ اس پوسٹ کا کوڈ GitHub پر دستیاب ہے۔، اسی طرح ایک لائیو ڈیمو.
یہ پوسٹ ڈیٹا ہینڈلنگ کے بارے میں ہے۔ ہم کچھ ابتدائی تلاش کی فعالیت شامل کریں گے جو صفحہ کے استفسار کے اسٹرنگ میں ترمیم کریں گے (بلٹ میں SvelteKit خصوصیات کا استعمال کرتے ہوئے)، اور صفحہ کے لوڈر کو دوبارہ متحرک کریں گے۔ لیکن، صرف اپنے (تصویراتی) ڈیٹا بیس سے دوبارہ استفسار کرنے کے بجائے، ہم کچھ کیچنگ شامل کریں گے تاکہ پہلے کی تلاشوں کو دوبارہ تلاش کرنے سے (یا بیک بٹن کا استعمال کرتے ہوئے) پہلے سے حاصل کردہ ڈیٹا کو، جلدی سے، کیشے سے دکھائے گا۔ ہم دیکھیں گے کہ کیشڈ ڈیٹا کے درست رہنے کی مدت کو کیسے کنٹرول کیا جائے اور زیادہ اہم بات یہ ہے کہ تمام کیش شدہ اقدار کو دستی طور پر کیسے غلط کیا جائے۔ کیک پر آئسنگ کے طور پر، ہم دیکھیں گے کہ کیش کو صاف کرتے ہوئے، ہم موجودہ اسکرین، کلائنٹ سائیڈ پر، میوٹیشن کے بعد، ڈیٹا کو دستی طور پر کیسے اپ ڈیٹ کر سکتے ہیں۔
یہ ایک طویل، زیادہ مشکل پوسٹ ہوگی جو میں عام طور پر لکھتا ہوں کیونکہ ہم مشکل موضوعات کا احاطہ کر رہے ہیں۔ یہ پوسٹ بنیادی طور پر آپ کو دکھائے گی کہ مشہور ڈیٹا یوٹیلیٹیز جیسے عام فیچرز کو کیسے نافذ کیا جائے۔ رد عمل کا سوال; لیکن بیرونی لائبریری کو کھینچنے کے بجائے، ہم صرف ویب پلیٹ فارم اور SvelteKit کی خصوصیات استعمال کریں گے۔
بدقسمتی سے، ویب پلیٹ فارم کی خصوصیات قدرے نچلی سطح پر ہیں، اس لیے ہم آپ کی عادت سے کچھ زیادہ کام کر رہے ہوں گے۔ الٹا یہ ہے کہ ہمیں کسی بیرونی لائبریری کی ضرورت نہیں ہوگی، جس سے بنڈل کے سائز کو اچھا اور چھوٹا رکھنے میں مدد ملے گی۔ براہ کرم ان طریقوں کو استعمال نہ کریں جو میں آپ کو دکھانے جا رہا ہوں جب تک کہ آپ کے پاس کوئی معقول وجہ نہ ہو۔ کیشنگ کا غلط ہونا آسان ہے، اور جیسا کہ آپ دیکھیں گے، اس میں تھوڑی سی پیچیدگی ہے جس کا نتیجہ آپ کے ایپلیکیشن کوڈ میں آئے گا۔ امید ہے کہ آپ کا ڈیٹا اسٹور تیز ہے، اور آپ کا UI ٹھیک ہے SvelteKit کو کسی بھی صفحے کے لیے درکار ڈیٹا کی درخواست کرنے کی اجازت دیتا ہے۔ اگر ایسا ہے تو اسے چھوڑ دو۔ سادگی سے لطف اٹھائیں۔ لیکن یہ پوسٹ آپ کو کچھ چالیں دکھائے گی جب یہ معاملہ رک جائے گا۔
رد عمل کے سوال کی بات کرتے ہوئے، یہ ابھی جاری کیا گیا تھا Svelte کے لئے! لہذا اگر آپ خود کو دستی کیشنگ تکنیکوں پر جھکاؤ محسوس کرتے ہیں۔ بہت زیادہاس پروجیکٹ کو ضرور دیکھیں، اور دیکھیں کہ آیا اس سے مدد مل سکتی ہے۔
قائم کرنے
اس سے پہلے کہ ہم شروع کریں، آئیے اس میں چند چھوٹی تبدیلیاں کریں۔ کوڈ ہمارے پاس پہلے تھا۔. اس سے ہمیں SvelteKit کی کچھ دوسری خصوصیات دیکھنے کا بہانہ ملے گا اور زیادہ اہم بات یہ ہے کہ ہمیں کامیابی کے لیے ترتیب دیا جائے گا۔
سب سے پہلے، آئیے اپنے لوڈر سے ڈیٹا لوڈنگ کو اندر منتقل کرتے ہیں۔ +page.server.js ایک API کا راستہ. ہم ایک بنائیں گے +server.js میں دائر routes/api/todos، اور پھر ایک شامل کریں۔ GET فنکشن اس کا مطلب ہے کہ اب ہم حاصل کرنے کے قابل ہو جائیں گے (پہلے سے طے شدہ GET فعل کا استعمال کرتے ہوئے) /api/todos راستہ ہم پہلے جیسا ڈیٹا لوڈنگ کوڈ شامل کریں گے۔
import { json } from "@sveltejs/kit";
import { getTodos } from "$lib/data/todoData"; export async function GET({ url, setHeaders, request }) { const search = url.searchParams.get("search") || ""; const todos = await getTodos(search); return json(todos);
}اس کے بعد، آئیے ہمارے پاس موجود صفحہ لوڈر کو لے لیں، اور صرف اس فائل کا نام تبدیل کریں۔ +page.server.js کرنے کے لئے +page.js (یا .ts اگر آپ نے TypeScript استعمال کرنے کے لیے اپنے پروجیکٹ کا سہارا لیا ہے)۔ یہ ہمارے لوڈر کو سرور لوڈر کے بجائے "یونیورسل" لوڈر میں تبدیل کر دیتا ہے۔ SvelteKit دستاویزات فرق کی وضاحت، لیکن ایک یونیورسل لوڈر سرور اور کلائنٹ دونوں پر چلتا ہے۔ ہمارے لیے ایک فائدہ یہ ہے کہ fetch ہمارے نئے اینڈ پوائنٹ میں کال ہمارے براؤزر سے (ابتدائی لوڈ کے بعد) براؤزر کے مقامی کو استعمال کرتے ہوئے چلے گی۔ fetch فنکشن ہم تھوڑی دیر میں معیاری HTTP کیشنگ شامل کریں گے، لیکن ابھی کے لیے، ہم صرف اینڈ پوائنٹ کو کال کریں گے۔
export async function load({ fetch, url, setHeaders }) { const search = url.searchParams.get("search") || ""; const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}`); const todos = await resp.json(); return { todos, };
}اب ہم ایک سادہ فارم کو اپنے میں شامل کرتے ہیں۔ /list صفحہ:
<div class="search-form"> <form action="/ur/list"> <label>Search</label> <input autofocus name="search" /> </form>
</div>جی ہاں، فارم براہ راست ہمارے عام صفحہ لوڈرز کو نشانہ بنا سکتے ہیں۔ اب ہم سرچ باکس میں تلاش کی اصطلاح شامل کر سکتے ہیں، دبائیں۔ درج، اور یو آر ایل کے استفسار کے اسٹرنگ میں ایک "تلاش" کی اصطلاح شامل کی جائے گی، جو ہمارے لوڈر کو دوبارہ چلائے گی اور ہمارے کرنے کی اشیاء کو تلاش کرے گی۔
چلو اپنی تاخیر میں بھی اضافہ کرتے ہیں۔ todoData.js میں دائر /lib/data. اس سے یہ دیکھنا آسان ہو جائے گا کہ ڈیٹا کب محفوظ ہے اور کب نہیں ہے کیونکہ ہم اس پوسٹ کے ذریعے کام کرتے ہیں۔
export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 500));یاد رکھیں، اس پوسٹ کا مکمل کوڈ ہے۔ سب GitHub پر، اگر آپ کو اس کا حوالہ دینے کی ضرورت ہے۔
بنیادی کیشنگ
آئیے اپنے میں کچھ کیشنگ شامل کرکے شروع کریں۔ /api/todos اختتامی نقطہ ہم اپنی طرف واپس جائیں گے۔ +server.js فائل کریں اور ہمارا پہلا کیش کنٹرول ہیڈر شامل کریں۔
setHeaders({ "cache-control": "max-age=60",
});… جو پورے فنکشن کو اس طرح چھوڑ دے گا:
export async function GET({ url, setHeaders, request }) { const search = url.searchParams.get("search") || ""; setHeaders({ "cache-control": "max-age=60", }); const todos = await getTodos(search); return json(todos);
}ہم جلد ہی دستی باطل کو دیکھیں گے، لیکن اس تمام فنکشن کا کہنا ہے کہ ان API کالز کو 60 سیکنڈ تک کیش کرنا ہے۔ آپ جو چاہیں اس پر سیٹ کریں۔، اور آپ کے استعمال کے معاملے پر منحصر ہے، stale-while-revalidate یہ بھی دیکھنے کے قابل ہو سکتا ہے.
اور بالکل اسی طرح، ہمارے سوالات کیش ہو رہے ہیں۔
نوٹ یقینی بنائیں کہ آپ غیر چیک چیک باکس جو ڈیو ٹولز میں کیشنگ کو غیر فعال کرتا ہے۔
یاد رکھیں، اگر ایپ پر آپ کی ابتدائی نیویگیشن فہرست کا صفحہ ہے، تو وہ تلاش کے نتائج اندرونی طور پر SvelteKit میں محفوظ کیے جائیں گے، لہذا اس تلاش پر واپس آنے پر DevTools میں کچھ دیکھنے کی توقع نہ کریں۔
کیش کیا ہے، اور کہاں
ہماری ایپ کا ہمارا پہلا، سرور کے ذریعے فراہم کردہ لوڈ (یہ فرض کرتے ہوئے کہ ہم شروع کرتے ہیں۔ /list صفحہ) سرور پر حاصل کیا جائے گا۔ SvelteKit اس ڈیٹا کو سیریلائز کرے گا اور ہمارے کلائنٹ کو بھیجے گا۔ مزید کیا ہے، یہ مشاہدہ کرے گا Cache-Control ہیڈر جواب پر، اور اس کیشڈ ڈیٹا کو کیش ونڈو کے اندر اس اینڈ پوائنٹ کال کے لیے استعمال کرنا جانیں گے (جسے ہم مثال کے طور پر 60 سیکنڈ پر سیٹ کرتے ہیں)۔
اس ابتدائی لوڈ کے بعد، جب آپ صفحہ پر تلاش کرنا شروع کرتے ہیں، تو آپ کو اپنے براؤزر سے نیٹ ورک کی درخواستیں نظر آنی چاہئیں /api/todos فہرست جب آپ ان چیزوں کو تلاش کرتے ہیں جنہیں آپ پہلے ہی تلاش کر چکے ہیں (آخری 60 سیکنڈ کے اندر)، جوابات فوری طور پر لوڈ ہونے چاہئیں کیونکہ وہ کیش ہو جاتے ہیں۔
اس نقطہ نظر کے ساتھ خاص طور پر جو چیز اچھی ہے وہ یہ ہے کہ چونکہ یہ براؤزر کی مقامی کیشنگ کے ذریعے کیشنگ کر رہا ہے، اس لیے یہ کالز (اس بات پر منحصر ہے کہ آپ کیش بسٹنگ کا انتظام کیسے کریں گے جسے ہم دیکھ رہے ہیں) کیش جاری رکھ سکتے ہیں یہاں تک کہ اگر آپ صفحہ کو دوبارہ لوڈ کرتے ہیں (اس کے برعکس ابتدائی سرور سائیڈ لوڈ، جو ہمیشہ اختتامی نقطہ کو تازہ کہتا ہے، چاہے اس نے اسے آخری 60 سیکنڈ میں کیا ہو)۔
ظاہر ہے کہ ڈیٹا کسی بھی وقت بدل سکتا ہے، اس لیے ہمیں اس کیش کو دستی طور پر صاف کرنے کے لیے ایک طریقہ درکار ہے، جسے ہم آگے دیکھیں گے۔
کیشے کی غلط کاری
ابھی، ڈیٹا 60 سیکنڈ کے لیے محفوظ کیا جائے گا۔ کوئی بات نہیں، ایک منٹ کے بعد، ہمارے ڈیٹا اسٹور سے تازہ ڈیٹا نکالا جائے گا۔ ہو سکتا ہے کہ آپ کو مختصر یا زیادہ وقت چاہیے، لیکن اگر آپ کچھ ڈیٹا کو تبدیل کرتے ہیں اور اپنے کیشے کو فوری طور پر صاف کرنا چاہتے ہیں تو کیا ہوتا ہے تاکہ آپ کی اگلی استفسار تازہ ترین ہو؟ ہم اپنے نئے پر بھیجے گئے URL میں استفسار کرنے والی قدر شامل کرکے اسے حل کریں گے۔ /todos اختتامی نقطہ
آئیے اس کیش بسٹنگ ویلیو کو کوکی میں اسٹور کریں۔ اس قدر کو سرور پر سیٹ کیا جا سکتا ہے لیکن پھر بھی کلائنٹ پر پڑھا جا سکتا ہے۔ آئیے کچھ نمونہ کوڈ دیکھیں۔
ہم ایک تشکیل دے سکتے ہیں۔ +layout.server.js فائل ہماری جڑ میں ہے۔ routes فولڈر یہ ایپلیکیشن اسٹارٹ اپ پر چلے گا، اور ابتدائی کوکی ویلیو سیٹ کرنے کے لیے ایک بہترین جگہ ہے۔
export function load({ cookies, isDataRequest }) { const initialRequest = !isDataRequest; const cacheValue = initialRequest ? +new Date() : cookies.get("todos-cache"); if (initialRequest) { cookies.set("todos-cache", cacheValue, { path: "/", httpOnly: false }); } return { todosCacheBust: cacheValue, };
}آپ نے محسوس کیا ہوگا۔ isDataRequest قدر. یاد رکھیں، کسی بھی وقت کلائنٹ کوڈ کالز پر لے آؤٹ دوبارہ چلیں گے۔ invalidate()، یا جب بھی ہم سرور ایکشن چلاتے ہیں (یہ فرض کرتے ہوئے کہ ہم ڈیفالٹ رویے کو بند نہیں کرتے ہیں)۔ isDataRequest ان ری رن کی طرف اشارہ کرتا ہے، اور اس لیے ہم صرف کوکی سیٹ کرتے ہیں اگر ایسا ہو۔ false; بصورت دیگر، ہم جو کچھ پہلے سے موجود ہے اس کے ساتھ بھیج دیتے ہیں۔
۔ httpOnly: false پرچم بھی اہم ہے. یہ ہمارے کلائنٹ کوڈ کو ان کوکی اقدار کو پڑھنے کی اجازت دیتا ہے۔ document.cookie. یہ عام طور پر سیکیورٹی کی تشویش کا باعث ہوگا، لیکن ہمارے معاملے میں یہ بے معنی نمبر ہیں جو ہمیں کیش یا کیش بسٹ کرنے کی اجازت دیتے ہیں۔
کیشے کی اقدار کو پڑھنا
ہمارا یونیورسل لوڈر وہی ہے جسے ہمارا کہتے ہیں۔ /todos اختتامی نقطہ یہ سرور یا کلائنٹ پر چلتا ہے، اور ہمیں اس کیش ویلیو کو پڑھنے کی ضرورت ہے جو ہم نے ابھی ترتیب دی ہے چاہے ہم کہیں بھی ہوں۔ اگر ہم سرور پر ہیں تو یہ نسبتاً آسان ہے: ہم کال کر سکتے ہیں۔ await parent() پیرنٹ لے آؤٹ سے ڈیٹا حاصل کرنے کے لیے۔ لیکن کلائنٹ پر، ہمیں تجزیہ کرنے کے لیے کچھ مجموعی کوڈ استعمال کرنے کی ضرورت ہوگی۔ document.cookie:
export function getCookieLookup() { if (typeof document !== "object") { return {}; } return document.cookie.split("; ").reduce((lookup, v) => { const parts = v.split("="); lookup[parts[0]] = parts[1]; return lookup; }, {});
} const getCurrentCookieValue = name => { const cookies = getCookieLookup(); return cookies[name] ?? "";
};خوش قسمتی سے، ہمیں صرف ایک بار اس کی ضرورت ہے۔
کیشے ویلیو بھیج رہا ہے۔
لیکن اب ہمیں ضرورت ہے۔ بھیجنے ہمارے لئے یہ قدر /todos اختتامی نقطہ
import { getCurrentCookieValue } from "$lib/util/cookieUtils"; export async function load({ fetch, parent, url, setHeaders }) { const parentData = await parent(); const cacheBust = getCurrentCookieValue("todos-cache") || parentData.todosCacheBust; const search = url.searchParams.get("search") || ""; const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}&cache=${cacheBust}`); const todos = await resp.json(); return { todos, };
}getCurrentCookieValue('todos-cache') اس میں ایک چیک ہے کہ آیا ہم کلائنٹ پر ہیں (دستاویز کی قسم کی جانچ کرکے)، اور اگر ہم ہیں تو کچھ نہیں لوٹاتا، جس وقت ہمیں معلوم ہوتا ہے کہ ہم سرور پر ہیں۔ پھر یہ ہماری ترتیب سے قیمت کا استعمال کرتا ہے۔
کیشے کو ختم کرنا
لیکن کس طرح کیا ہم واقعی اس کیش بسٹنگ ویلیو کو اپ ڈیٹ کرتے ہیں جب ہمیں ضرورت ہوتی ہے؟ چونکہ یہ ایک کوکی میں محفوظ ہے، اس لیے ہم اسے کسی بھی سرور ایکشن سے اس طرح کال کر سکتے ہیں:
cookies.set("todos-cache", cacheValue, { path: "/", httpOnly: false });نفاذ
یہ سب یہاں سے نیچے کی طرف ہے۔ ہم نے مشکل کام کیا ہے. ہم نے مختلف ویب پلیٹ فارم پرائمٹیوز کا احاطہ کیا ہے جن کی ہمیں ضرورت ہے، نیز وہ کہاں جاتے ہیں۔ اب آئیے کچھ مزہ کریں اور ان سب کو ایک ساتھ باندھنے کے لیے ایپلیکیشن کوڈ لکھیں۔
وجوہات کی بناء پر جو تھوڑی دیر میں واضح ہو جائیں گی، آئیے ایک ترمیمی فعالیت کو شامل کرکے شروع کرتے ہیں۔ /list صفحہ ہم ہر ایک ٹوڈو کے لیے یہ دوسری ٹیبل قطار شامل کریں گے:
import { enhance } from "$app/forms";<tr> <td colspan="4"> <form use:enhance method="post" action="?/editTodo"> <input name="id" value="{t.id}" type="hidden" /> <input name="title" value="{t.title}" /> <button>Save</button> </form> </td>
</tr>اور، یقینا، ہمیں اپنے لیے ایک فارم ایکشن شامل کرنے کی ضرورت ہوگی۔ /list صفحہ اعمال ہی اندر جا سکتے ہیں۔ .server صفحات، تو ہم ایک شامل کریں گے +page.server.js ہمارے میں /list فولڈر (ہاں ایک +page.server.js فائل a کے ساتھ ساتھ موجود ہوسکتی ہے۔ +page.js فائل۔)
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export const actions = { async editTodo({ request, cookies }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); cookies.set("todos-cache", +new Date(), { path: "/", httpOnly: false }); },
};ہم فارم کے ڈیٹا کو پکڑ رہے ہیں، تاخیر پر مجبور کر رہے ہیں، اپنے کام کو اپ ڈیٹ کر رہے ہیں، اور پھر، سب سے اہم بات، ہماری کیش بسٹ کوکی کو صاف کر رہے ہیں۔
آئیے اسے ایک شاٹ دیتے ہیں۔ اپنا صفحہ دوبارہ لوڈ کریں، پھر کام کرنے والی اشیاء میں سے کسی ایک میں ترمیم کریں۔ آپ کو ایک لمحے کے بعد ٹیبل ویلیو اپ ڈیٹ دیکھنا چاہئے۔ اگر آپ DevToold میں نیٹ ورک ٹیب میں دیکھتے ہیں، تو آپ کو ایک بازیافت نظر آئے گا۔ /todos اینڈ پوائنٹ، جو آپ کا نیا ڈیٹا واپس کرتا ہے۔ آسان، اور بطور ڈیفالٹ کام کرتا ہے۔
فوری اپ ڈیٹس
کیا ہوگا اگر ہم اس بازیافت سے بچنا چاہتے ہیں جو ہمارے کرنے والے آئٹم کو اپ ڈیٹ کرنے کے بعد ہوتا ہے، اور اس کے بجائے، ترمیم شدہ آئٹم کو اسکرین پر ہی اپ ڈیٹ کرتے ہیں؟
یہ صرف کارکردگی کا معاملہ نہیں ہے۔ اگر آپ "پوسٹ" کو تلاش کرتے ہیں اور پھر فہرست میں سے کسی بھی کرنے والے آئٹم سے لفظ "پوسٹ" کو ہٹا دیتے ہیں، تو وہ ترمیم کے بعد فہرست سے غائب ہو جائیں گے کیونکہ وہ اس صفحہ کے تلاش کے نتائج میں مزید نہیں ہیں۔ آپ باہر نکلنے والے کام کے لیے کچھ ذائقہ دار اینیمیشن کے ساتھ UX کو بہتر بنا سکتے ہیں، لیکن ہم کہتے ہیں کہ ہم نوٹ اس صفحہ کے لوڈ فنکشن کو دوبارہ چلائیں لیکن پھر بھی کیشے کو صاف کریں اور ترمیم شدہ کام کو اپ ڈیٹ کریں تاکہ صارف ترمیم دیکھ سکے۔ SvelteKit اسے ممکن بناتا ہے - آئیے دیکھتے ہیں کہ کیسے!
پہلے، آئیے اپنے لوڈر میں ایک چھوٹی سی تبدیلی کرتے ہیں۔ اپنے کام کی چیزیں واپس کرنے کے بجائے، آئیے واپس کرتے ہیں۔ لکھنے کے قابل اسٹور ہمارے کرنے کے کاموں پر مشتمل ہے۔
return { todos: writable(todos),
};اس سے پہلے، ہم پر اپنے کاموں تک رسائی حاصل کر رہے تھے۔ data prop، جس کا ہم مالک نہیں اور اپ ڈیٹ نہیں کر سکتے۔ لیکن Svelte ہمیں اپنا ڈیٹا ان کے اپنے اسٹور میں واپس کرنے دیتا ہے (یہ فرض کرتے ہوئے کہ ہم یونیورسل لوڈر استعمال کر رہے ہیں، جو ہم ہیں)۔ ہمیں صرف اپنے میں ایک اور موافقت کرنے کی ضرورت ہے۔ /list صفحہ.
اس کے بجائے:
{#each todos as t}… ہمیں اس کے بعد سے ایسا کرنے کی ضرورت ہے۔ todos اب خود ایک اسٹور ہے۔
{#each $todos as t}اب ہمارا ڈیٹا پہلے کی طرح لوڈ ہو رہا ہے۔ لیکن جب سے todos لکھنے کے قابل اسٹور ہے، ہم اسے اپ ڈیٹ کر سکتے ہیں۔
سب سے پہلے، آئیے اپنے کو ایک فنکشن فراہم کرتے ہیں۔ use:enhance وصف:
<form use:enhance={executeSave} on:submit={runInvalidate} method="post" action="?/editTodo"
>یہ جمع کرانے سے پہلے چلے گا۔ آئیے آگے لکھتے ہیں:
function executeSave({ data }) { const id = data.get("id"); const title = data.get("title"); return async () => { todos.update(list => list.map(todo => { if (todo.id == id) { return Object.assign({}, todo, { title }); } else { return todo; } }) ); };
}یہ فنکشن فراہم کرتا ہے a data ہمارے فارم ڈیٹا کے ساتھ اعتراض۔ ہم واپسی ایک async فنکشن جو چلے گا۔ کے بعد ہماری ترمیم ہو چکی ہے۔ دستاویزات ان سب کی وضاحت کریں، لیکن ایسا کرنے سے، ہم نے SvelteKit کی ڈیفالٹ فارم ہینڈلنگ کو بند کر دیا جس سے ہمارے لوڈر کو دوبارہ چلایا جائے گا۔ یہ بالکل وہی ہے جو ہم چاہتے ہیں! (ہم آسانی سے اس ڈیفالٹ رویے کو واپس لے سکتے ہیں، جیسا کہ دستاویزات کی وضاحت ہے۔)
اب ہم کال کرتے ہیں۔ update ہمارے todos صف چونکہ یہ ایک اسٹور ہے۔ اور وہ ہے. کسی کام کی چیز میں ترمیم کرنے کے بعد، ہماری تبدیلیاں فوری طور پر ظاہر ہوتی ہیں اور ہمارا کیش صاف ہوجاتا ہے (پہلے کی طرح، چونکہ ہم نے اپنی میں ایک نئی کوکی ویلیو سیٹ کی ہے) editTodo فارم ایکشن)۔ لہذا، اگر ہم تلاش کرتے ہیں اور پھر اس صفحہ پر واپس تشریف لے جاتے ہیں، تو ہمیں اپنے لوڈر سے تازہ ڈیٹا ملے گا، جو درست طریقے سے اپ ڈیٹ کیے گئے کسی بھی اپ ڈیٹ شدہ کام کو خارج کر دے گا۔
فوری اپ ڈیٹس کے لیے کوڈ GitHub پر دستیاب ہے۔.
گہری کھدائی
ہم کوکیز کو کسی بھی سرور لوڈ فنکشن (یا سرور ایکشن) میں سیٹ کر سکتے ہیں، نہ کہ صرف روٹ لے آؤٹ میں۔ لہذا، اگر کچھ ڈیٹا صرف ایک لے آؤٹ، یا یہاں تک کہ ایک صفحے کے نیچے استعمال کیا جاتا ہے، تو آپ کوکی کی قیمت وہاں سیٹ کر سکتے ہیں۔ اس کے علاوہ، اگر آپ ہیں نوٹ اس چال کو کرتے ہوئے میں نے صرف آن اسکرین ڈیٹا کو دستی طور پر اپ ڈیٹ کرتے ہوئے دکھایا، اور اس کے بجائے آپ کا لوڈر کسی تبدیلی کے بعد دوبارہ چلنا چاہتا ہوں، تو آپ ہمیشہ اس لوڈ فنکشن میں بغیر کسی جانچ کے ایک نئی کوکی ویلیو سیٹ کر سکتے ہیں۔ isDataRequest. یہ ابتدائی طور پر سیٹ ہو جائے گا، اور پھر جب بھی آپ سرور ایکشن چلاتے ہیں تو صفحہ لے آؤٹ خود بخود آپ کے لوڈر کو باطل کر دے گا اور آپ کے لوڈر کو دوبارہ کال کر دے گا، آپ کے یونیورسل لوڈر کو کال کرنے سے پہلے کیش بسٹ سٹرنگ کو دوبارہ ترتیب دے گا۔
دوبارہ لوڈ فنکشن لکھنا
آئیے ایک آخری خصوصیت بنا کر سمیٹتے ہیں: دوبارہ لوڈ کرنے والا بٹن۔ آئیے صارفین کو ایک بٹن دیں جو کیشے کو صاف کرے گا اور پھر موجودہ سوال کو دوبارہ لوڈ کرے گا۔
ہم ایک گندگی سادہ فارم ایکشن شامل کریں گے:
async reloadTodos({ cookies }) { cookies.set('todos-cache', +new Date(), { path: '/', httpOnly: false });
},ایک حقیقی پروجیکٹ میں آپ شاید ایک ہی کوکی کو متعدد جگہوں پر ایک ہی طریقے سے سیٹ کرنے کے لیے ایک ہی کوڈ کو کاپی/پیسٹ نہیں کریں گے، لیکن اس پوسٹ کے لیے ہم سادگی اور پڑھنے کی اہلیت کے لیے بہتر بنائیں گے۔
اب اس پر پوسٹ کرنے کے لیے ایک فارم بنائیں:
<form method="POST" action="?/reloadTodos" use:enhance> <button>Reload todos</button>
</form>یہ کام کرتا ہے!
ہم اسے مکمل کہہ سکتے ہیں اور آگے بڑھ سکتے ہیں، لیکن آئیے اس حل کو تھوڑا بہتر بنائیں۔ خاص طور پر، آئیے صارف کو یہ بتانے کے لیے صفحہ پر تاثرات فراہم کریں کہ دوبارہ لوڈ ہو رہا ہے۔ اس کے علاوہ، ڈیفالٹ کے طور پر، SvelteKit کے اعمال باطل ہو جاتے ہیں۔ سب کچھ. موجودہ صفحہ کے درجہ بندی میں ہر ترتیب، صفحہ، وغیرہ کو دوبارہ لوڈ کیا جائے گا۔ روٹ لے آؤٹ میں ایک بار لوڈ ہونے والا کچھ ڈیٹا ہو سکتا ہے جسے ہمیں غلط یا دوبارہ لوڈ کرنے کی ضرورت نہیں ہے۔
لہذا، آئیے چیزوں پر تھوڑا سا فوکس کرتے ہیں، اور صرف اپنے کام کو دوبارہ لوڈ کرتے ہیں جب ہم اس فنکشن کو کال کرتے ہیں۔
سب سے پہلے، آئیے بڑھانے کے لیے ایک فنکشن پاس کریں:
<form method="POST" action="?/reloadTodos" use:enhance={reloadTodos}>import { enhance } from "$app/forms";
import { invalidate } from "$app/navigation"; let reloading = false;
const reloadTodos = () => { reloading = true; return async () => { invalidate("reload:todos").then(() => { reloading = false; }); };
};ہم ایک نیا سیٹ کر رہے ہیں۔ reloading کے لیے متغیر true پر شروع کریں اس کارروائی کے. اور پھر، ہر چیز کو باطل کرنے کے پہلے سے طے شدہ رویے کو ختم کرنے کے لیے، ہم ایک واپس کرتے ہیں۔ async فنکشن یہ فنکشن اس وقت چلے گا جب ہمارا سرور ایکشن ختم ہو جائے گا (جو صرف ایک نئی کوکی سیٹ کرتا ہے)۔
اس کے بغیر async فنکشن واپس آ گیا، SvelteKit ہر چیز کو باطل کر دے گا۔ چونکہ ہم یہ فنکشن فراہم کر رہے ہیں، یہ کچھ بھی باطل نہیں کرے گا، لہذا یہ ہم پر منحصر ہے کہ ہم اسے بتائیں کہ کیا دوبارہ لوڈ کرنا ہے۔ ہم اس کے ساتھ کرتے ہیں۔ invalidate فنکشن ہم اسے کی قدر کے ساتھ کہتے ہیں۔ reload:todos. یہ فنکشن ایک وعدہ لوٹاتا ہے، جو حل ہو جاتا ہے جب باطل مکمل ہو جاتا ہے، جس مقام پر ہم سیٹ کرتے ہیں۔ reloading پچھلی جانب false.
آخر میں، ہمیں اپنے لوڈر کو اس نئے کے ساتھ ہم آہنگ کرنے کی ضرورت ہے۔ reload:todos باطل کرنے کی قدر ہم اپنے لوڈر میں اس کے ساتھ کرتے ہیں۔ depends فنکشن:
export async function load({ fetch, url, setHeaders, depends }) { depends('reload:todos'); // rest is the sameاور وہ ہے. depends اور invalidate ناقابل یقین حد تک مفید افعال ہیں. کیا اچھا ہے وہ ہے invalidate صرف صوابدیدی اقدار نہیں لیتا جو ہم فراہم کرتے ہیں جیسا کہ ہم نے کیا تھا۔ ہم ایک URL بھی فراہم کر سکتے ہیں، جسے SvelteKit ٹریک کرے گا، اور کسی بھی لوڈرز کو باطل کر دے گا جو اس URL پر منحصر ہے۔ اس مقصد کے لیے، اگر آپ سوچ رہے ہیں کہ کیا ہم کال کو چھوڑ سکتے ہیں۔ depends اور ہمارے باطل /api/todos اختتامی نقطہ مکمل طور پر، آپ کر سکتے ہیں، لیکن آپ کو فراہم کرنا ہوگا۔ ٹھیک ہے یو آر ایل، بشمول search اصطلاح (اور ہماری کیش ویلیو)۔ لہذا، آپ یا تو موجودہ تلاش کے لیے یو آر ایل کو اکٹھا کر سکتے ہیں، یا راستے کے نام سے مماثل ہیں، اس طرح:
invalidate(url => url.pathname == "/api/todos");ذاتی طور پر، مجھے وہ حل ملتا ہے جو استعمال کرتا ہے۔ depends زیادہ واضح اور سادہ. لیکن دیکھیں دستاویزات مزید معلومات کے لیے، یقیناً، اور خود فیصلہ کریں۔
اگر آپ دوبارہ لوڈ بٹن کو عمل میں دیکھنا چاہتے ہیں، تو اس کا کوڈ موجود ہے۔ ریپو کی یہ شاخ.
الگ الگ خیالات
یہ ایک طویل پوسٹ تھی، لیکن امید ہے کہ زبردست نہیں ہوگی۔ SvelteKit استعمال کرتے وقت ہم مختلف طریقوں سے ڈیٹا کیش کر سکتے ہیں۔ اس میں سے زیادہ تر صرف صحیح کیش، اور کوکی اقدار کو شامل کرنے کے لیے ویب پلیٹ فارم پرائمیٹوز کو استعمال کرنے کا معاملہ تھا، جس کا علم صرف SvelteKit کے علاوہ، عمومی طور پر ویب ڈویلپمنٹ میں آپ کی خدمت کرے گا۔
اس کے علاوہ، یہ آپ کو بالکل کچھ ہے ہر وقت کی ضرورت نہیں ہے. دلیل کے طور پر، آپ کو صرف اس قسم کی جدید خصوصیات تک پہنچنا چاہئے جب آپ اصل میں ان کی ضرورت ہے. اگر آپ کا ڈیٹا سٹور تیزی سے اور مؤثر طریقے سے ڈیٹا پیش کر رہا ہے، اور آپ کسی بھی قسم کے سکیلنگ کے مسائل سے نمٹ نہیں رہے ہیں، تو آپ کے ایپلیکیشن کوڈ کو غیر ضروری پیچیدگی کے ساتھ ان چیزوں کو کرنے کا کوئی مطلب نہیں ہے جن کے بارے میں ہم نے یہاں بات کی ہے۔
ہمیشہ کی طرح، صاف، صاف، سادہ کوڈ لکھیں، اور ضرورت پڑنے پر اصلاح کریں۔ اس پوسٹ کا مقصد آپ کو وہ اصلاحی ٹولز فراہم کرنا تھا جب آپ کو واقعی ان کی ضرورت ہو۔ مجھے امید ہے کہ آپ نے لطف اٹھایا!
- SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://css-tricks.com/caching-data-in-sveltekit/