FarfetchedFarfetched
WARNING
Current version of Farfetched is not stable yet. Please, read Releases policy before using it.
Farfetched is a missing data-fetching library for frontend, in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.
Why Farfetched?
Let's imagine that you can a pretty simple task: fetch a list of items from the server. And we have to add some extras — validate responses because server can be unreliable, retries in case of network errors, and so on. It's not a big deal, but it's a lot of boilerplate code that you have to write every time you need to fetch something.
Here is how you can do it without Farfetched
async function fetchItems() {
const response = await fetch('/api/items', {
method: 'GET',
});
if (!reponse.ok) {
throw new Error('Failed to fetch');
}
const parsed = await response.json(); // Can be failed
const valid = validateAgainsContract(parsed, ItemsResponseContract);
if (!valid) {
throw new Error('Invalid response');
}
return parsed;
}
let attempt = 0;
async function start() {
try {
const items = await fetchItemsByIds(ids);
return items;
} catch (error) {
if (attemptForItems < 3 && error.message === 'Failed to fetch') {
attemptForItems += 1;
await new Promise((resolve) => setTimeout(resolve, 1000));
return start(ids);
} else {
throw error;
}
}
}
start()
.then((items) => {
console.log('YEAH', items);
})
.catch((error) => {
console.error('OH NO', error);
});Let's see how it looks with Farfetched:
Same code with Farfetched
import { createJsonQuery, isNetworkError, retry } from '@farfetched/core';
const itemsQuery = createJsonQuery({
request: { url: '/api/items', method: 'GET' },
response: { contract: ItemsResponseContract },
});
retry(itemsQuery, {
times: 3,
delay: 1000,
filter: isNetworkError,
});
itemsQuery.finished.success.watch((items) => {
console.log('YEAH', items);
});
itemsQuery.finished.error.watch((error) => {
console.error('OH NO', error);
});
itemsQuery.refresh();Pretty cool, right? We love it, and we hope you will too. Read on to learn more about Farfetched.
What's next?
- Learn Farfetched at your own pace with our amazingly Thorough Tutorial
- Read framework-specific recommendations for Solid and React
- Learn about step-by-step adoption of Farfetched for existing applications which uses different tools for data fetching:
- See the whole picture in API reference
- Check out Farfetched's roadmap to stay in the same wavelength with us