Fetch MI

fetchmi

In the digital age, where users expect lightning-fast loading times and seamless browsing experiences, optimizing web performance is paramount for businesses and developers alike. One key aspect of this optimization lies in efficient resource fetching and prioritization. In this article, we delve into various techniques and strategies, including pre-connect and dns-prefetch, fetchpriority, prefetch, and preload, as well as the utilization of async and defer attributes in JavaScript execution. By implementing these approaches, developers can significantly enhance page load times, improve user experience, and ultimately, bolster key performance metrics such as Largest Contentful Paint (LCP) and First Contentful Paint (FCP). Let's explore how each of these methods contributes to a faster and more responsive web. Establish Early Connections With and preconnect dns-prefetch Consider adding t or resource hints to establish early connections to important third-party origins. preconnec dns-prefetch Modern browsers what connections a page will need, but they cannot reliably predict them all. We can give them a (resource) hint. try their best to anticipate informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible. <link rel="preconnect"> The hint is best used for only the most critical connections. preconnect For all the rest, use to save time on the first step(round trip), the DNS lookup, which usually takes around <link rel=dns-prefetch> 20–120 ms. Preconnecting is only effective for domains other than the origin domain, so you shouldn't use it for your site. Only preconnect to critical domains you will use soon because the browser closes any connection that isn't used within 10 seconds. Unnecessary preconnecting can delay other important resources, so limit the number of preconnected domains and . test the impact preconnecting makes If a page needs to make connections to many third-party domains, preconnecting all of them is counterproductive. The preconnect hint is best used for only the most critical connections. For all the rest, use <link rel=dns-prefetch> to save time on the first step, the DNS lookup, which usually takes around . 20–120 ms is slightly different from , so dns-prefetch can serve as a fallback for browsers that don't support . Browser support for dns-prefetch preconnect support preconnect Effect on Largest Contentful Paint (LCP) Using dns-prefetch and preconnect allows sites to reduce the amount of time it takes to connect to another origin. The ultimate aim is that the time to load a resource from another origin should be minimized as much as possible. Where is concerned, it is better that resources are immediately discoverable, since are crucial parts of the user experience. Largest Contentful Paint (LCP) LCP candidates Optimizing Resource Loading With Priority Hints With fetchpriority is an attribute that allows you to hint at the relative priority of a resource (high or low). Priority Hints can help optimize the Core Web Vitals. Fetchpriority You can provide a Priority Hint using the HTML attribute. You can use the attribute with , , , and tags. The attribute allows you to specify the priority for resource types such as CSS, fonts, scripts, images, and iframe when downloaded using the supported tags. fetchpriority link img script iframe The fetchpriority attribute accepts one of three values: : This is used when the resource is considered a high priority. The browser is instructed to prioritize it, given that its heuristics don't hinder this. high : This is used when the resource is considered a low priority. The browser is instructed to deprioritize it if its heuristics allow. low : This is the default value used when there is no preference. The browser decides the appropriate priority. auto <img src="lcp-image.jpg" fetchpriority="high">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
	.then(data => {
		// Trigger a low priority fetch
	});
</script> The attribute is a hint and not a directive. The browser will try to respect the developer's preference. It is also possible that the browser will apply its preferences for resource priority as deemed necessary in case of conflicts. fetchpriority Effect on Largest Contentful Paint (LCP) You can specify to boost the priority of the LCP or other critical images. fetchpriority="high" <img src="lcp-image.jpg" fetchpriority="high"> Prefetch Resources to Speed Up Future Navigations With prefetch Adding to a web page tells the browser to download entire pages or some of the resources (like scripts or CSS files), that the user might need in the future. <link rel=prefetch> The hint consumes extra bytes for resources that are not immediately needed, so this technique needs to be applied thoughtfully; only prefetch resources when you are confident that users will need them. prefetch <link rel="prefetch" href="/articles/" as="document"> Effect on Largest Contentful Paint (LCP) Prefetching images can significantly lower LCP times for LCP image elements. Prefetching stylesheets can improve both FCP and LCP, as the network time to download the stylesheet will be eliminated. Since stylesheets are render-blocking, they can reduce LCP when prefetched. In cases where the subsequent page's LCP element is a CSS background image requested via the background-image property, the image will also be prefetched as a dependent resource of the prefetched stylesheet. Prefetching JavaScript will allow the processing of the prefetched script to occur much sooner than if it were required to be fetched by the network first during navigation. This can have an effect on responsiveness metrics such as and . First Input Delay (FID) Interaction to Next Paint (INP) In cases where markup is rendered on the client via JavaScript, LCP can be improved through reduced resource load delays, and client-side rendering of markup containing a page's LCP element can occur sooner. If you're using , you can apply prefetch to routes or components that are not immediately necessary but will likely be requested soon. code-splitting <link rel="prefetch" as="script" href="1.bundle.js">

import(/* webpackPrefetch: true */ 'Pages/Step1/Step2'); Preload Critical Assets to Improve the Loading Speed With preload By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. <link rel="preload" as="script" href="critical.js">

Link: </css/style.css>; rel="preload"; as="style" Supplying the attribute helps the browser set the priority of the prefetched resource according to its type, set the right headers, and determine whether the resource already exists in the cache. Accepted values for this attribute include: , , , , and . as script style font image others Pacifico font is defined in the stylesheet with a rule. The browser loads the font file only after it has finished downloading and parsing the stylesheet. @font-face Pacifico font is preloaded, so the download happens in parallel with the stylesheet. Fonts defined with @font-face rules or background images defined in CSS files aren't discovered until the browser downloads and parses those CSS files. Preloading these resources ensures they are fetched before the CSS files have been downloaded. Because browsers don't preloaded files, preloading is useful to separate fetching from execution which can improve metrics such as Time to Interactive. Preloading works best if you your JavaScript bundles and only preload critical chunks. execute split Largest Contentful Paint (LCP) Preloading has a powerful effect on when it comes to fonts and images, as both images and text nodes can be . Hero images and large runs of text that are rendered using web fonts can benefit significantly from a well-placed preload hint and should be used when there are opportunities to deliver these important bits of content to the user faster. Largest Contentful Paint (LCP) LCP candidates However, you want to be careful when it comes to preloading—and other optimizations! In particular, avoid preloading too many resources. If too many resources are prioritized, effectively none of them are. The effects of excessive preload hints will be especially detrimental to those on slower networks where bandwidth contention will be more evident. Use or to Execute the Code async defer JavaScript execution is parser blocking. This means when the browser encounters a script it must pause DOM construction, hand this over to the JavaScript engine, and allow script execution before proceeding with DOM construction. The and attributes tell the browser that it may go on parsing the HTML while loading the script in the background, and then execute the script after it loads. This way, script downloads don't block DOM construction and page rendering. The result is that the user can see the page before all scripts have finished loading. async defer <script async src="script.js">
<script defer src="script.js"> The async and defer attributes change this behavior. With , the browser downloads the script asynchronously while it continues to parse the HTML document. When the script finishes downloading, parsing is blocked while the script executes. async With , the browser downloads the script asynchronously while it continues to parse the HTML document. The script doesn't run until the parsing is complete. defer Largest Contentful Paint (LCP) and First Contentful Paint (FCP) Proper configuration of high and low-priority scripts can give more sources to the parser to render the HTML while some of the scripts are being loaded as third-party scripts will not block the parser. And the browser is able to render the page as soon as possible.

Enhancing Web Performance: Strategies for Efficient Resource Fetching and Prioritization

Suspense was introduced in React 16.6 (and that was 5 years ago), yet for a long time its sole purpose was just code splitting. You could use it to wire your own data fetching ing promises here and there, but that was pretty much it. Now, in React 18, Suspense got a significant upgrade with support for SSR streaming and selective hydration. And recently, a new hook (called ), which significantly simplifies using Suspense for data fetching, was documented on the new React docs. throw use Though was a part of for 5 years, Suspense for data fetching is still not considered production-ready by the React team and is not recommended for use in production. Moreover, hook, which we'll cover today, is not exposed as a part of the stable React release. To try it out yourself, you'll need to use the Canary or experimental React channel. You can find more info about those channels . <Suspense /> React use here What it does At a conceptual level, Suspense is a boundary, a bit like an Error boundary. Though it's not used to isolate errors in a subtree (instead of letting it bubble to root and crash your app), it's used to isolate a subtree that is loading at the moment of render. If React, while rendering an app, stumbles upon a component that isn't ready to be rendered yet, it will walk upwards to the closest Suspense boundary, suspend its subtree (this means it will hide the subtree but not unmount it), and display the provided . Once the component that caused suspense finishes loading, the whole tree will be re-rendered and displayed again. children fallback But let's take a look at the details: how components might not be ready to be rendered, what 'suspending' a subtree really means, and what practical use cases Suspense has. Suspense behaves a bit differently in concurrent mode. We won't explore it in this article, but I plan to cover it in the next article dedicated to concurrent features of React. What causes subtree suspension The first and most known way to suspend is to render a lazy component. A lazy component is a component returned by and it's used to move certain components out of the initial bundle, thus reducing its size and load time. When you first render such a component, React will find the closest and suspend its subtree. When a component is loaded, the subtree will be re-rendered. If a load fails, the error will be propagated to the closest error boundary. React.lazy <Suspense /> Another way is to use Suspense-enabled data fetching libraries (like Relay) or call with a promise directly (or throw a promise if is unavailable). In this case, React will suspend while the promise is pending and then re-render when the promise resolves. As with , errors will be propagated to the closest error boundary. More about later in the article. use use lazy use The last case is related to server-side rendering. If, during SSR, one of your components inside the Suspense boundary throws an error, it won't be propagated to the closest error boundary (even if there is one closer than the suspense boundary). Instead, React will render from Suspense and send it to the client. On the client, React will try to render the component again. If it succeeds, fallback will be replaced with a rendered component. If the component throws an error again, it will be treated as usual — propagated to the closest error boundary (or crash your app if there is none). fallback What happens with the component As I said, when React suspends a subtree, React doesn't unmount it, and the current state of the component is preserved. Instead, React just 'hides' the suspended subtree. Under the hood, Suspense uses the new Offscreen component (available only in the experimental channel), which assigns to elements and fires cleanup for layout effects, so you can stop subscriptions that might depend on DOM elements. style="display: none !important;" If you want to dive into the details of Suspense implementation, I really recommend this . article by JSer Benefits With Suspense, React introduces the state of 'loading' as a first-class citizen into the React world. Before, you used the component state to indicate data loading status. You could have something like this in your code: const { data, isLoading, error } = useData(); Based on the value of those properties, you rendered the loading spinner, error screen, or actual view with data. React couldn't know if your component was loading some data or not. With Suspense, you now let React know when a component is loading something, which in turn allows React to do some useful optimizations. Firstly, this simplifies the data-fetching code. You don't need to check for or , all code after is guaranteed to have data ready to use. isLoading error use // This:
const OldComponent = () => {
    const { transactions, isLoading, error } = useTransatcions();

    // If you need to use transactions in hooks, it becomes 
    // even more cumbersome because you need to always check 
    // if data isn't undefined (and you obviously can't move 
    // hooks below ifs because it will make them conditional)

    if (isLoading) {
        return (<Spinner />);
    }

    if (error) {
        return (<Error />);
    }

    // Finally you can render actual component!
    return (<TransactionsTable transactions={transactions} />);
};

// becomes this
const SuspensePowered = () => {
    const transactions = useTransatcionsSuspense();
    // Use any hooks you want here
    // transactions are populated with data at this point
    return (<TransactionsTable transactions={transactions} />);
} Another benefit is improved SSR. I already mentioned that Suspense helps to recover from errors while rendering an app on the server, but it doesn't end there. If you use Suspense-enabled data fetching libraries, this enables to stream as your components render. React will emit for suspended boundaries and continue rendering other components. Once data is fetched, React will render the subtree and emit HTML along with a small inline script that will replace the previously rendered fallback. So you get progressive loading even before the main bundle with React is loaded into the client browser, and now one big component (which loads a lot of data) won't slow down the rendering of the whole app. react-dom/server HTML fallback Another benefit Suspense brings to SSR is selective hydration. Now, client-side React doesn't need to wait for all the code to be loaded before hydrating. Previously, components weren't really compatible with SSR, you had to choose either to have SSR and a large bundle or no SSR but a smaller bundle. Suspense allows React to hydrate the app part by part once all the components from the respective Suspense subtree are loaded. lazy Dan describes both optimizations extremely well and in great detail in . this post Use hook 101 hook was recently documented, and it means that sooner or later we'll see it in stable React. For now, though, it's only in canary and experimental channels. So you still have some time to master it ;) use While is definitely a hook and you can't use it outside of function components, it's a bit special: you can use it in conditional statements and loops. use This hook is used to read the value of a resource. Currently, it works only with context and promises, but that might change in the future. For reading context, it pretty much mirrors hook. But if you pass it a promise, it will suspend the component if the promise isn't resolved yet and return data from the promise if it's fulfilled. Any errors will be propagated to the error boundary (or you can add to your promise and return an alternative value in case of failure). useContext .catch Here is how you use this hook: import { use, Suspense } from 'react';

const onlineUsersPromise = getOnlineUsers();

const Users = () => {
    const users = use(onlineUsersPromise);
    //            ^^ this will suspend if onlineUsersPromise 
    //               isn't resolved when component is rendering

    return (<div>
        <h2>Users online</h2>
        <ul>
            {users.map(user => (<li>{user}</li>))}
        </ul>
    </div>);
};

const App = () => {
    return (<Suspense fallback="Loading...">
        <Users />
    </Suspense>);
} As you can see, we create the promise outside the component, this doesn't look very convenient, does it? You could try to create a promise directly in the component, like this: const users = use(getOnlineUsers()); But this won't work because, on each render of a component, we'll create a new promise and just spam our server with a bunch of requests. If you're making your own data fetching solution with Suspense, you'll need to write some glue code, you can't use out of the box. At least you will need to memorize the promise somehow. use Data fetching with use So let's write that glue code and make our own data-fetching hook around . We won't reinvent the wheel and will make the API of our hook similar to SWR or react-query. You supply a string, which acts as a global cache key, and a function, which returns a promise. If there is no record with this key in the cache, we create a promise and save it to the cache; otherwise, we reuse a promise from the cache. use function useData<T>(key: string, func: () => Promise<T>): T; Unfortunately, if your component will suspend on the first render (before it's mounted), you can't have cache local for each component instance (using or ) because after the first suspension any refs and memoized values will be discarded. So we'll need some kind of global cache. For the sake of simplicity, we'll just use global , but you can of course use context to localize cache to a part of your app. useMemo useRef Map const dataCache = new Map<string, Promise<any>>();
const useData = <T,>(key: string, load: () => Promise<T>) => {
    let promise = dataCache.get(key);
    if (!promise) {
        promise = load();
        dataCache.set(key, promise);
    }

    const data = use(promise as Promise<T>);

    return data;
}; The code above obviously misses a lot of features from big boy data fetching libraries. For example, revalidation or better cache control. But it does its job. It's used as follows: const WinesList = ({ type }: { type: string }) => {
    const wines = useData(`wines-${type}`, () => getWines(type));

    return (<ul key={type}>
        {wines.map(wine => {
            return (<li key={wine.id}>
                {wine.wine} from {wine.location}
            </li>)
        })}
    </ul>);
}; And that's all for today! The serious part of the article ends here, but I have a few more experimental tricks with for you. This is the part where we do reinvent the wheel. use Own lazy components With hook, you can make your own implementation of . The original implementation doesn't use under the hood, but the concept is the same. use React.lazy lazy use const myLazy = <P extends JSX.IntrinsicAttributes, R = unknown>(loader: () => Promise<ComponentType<P>>) => {
    let promise: Promise<ComponentType<P>> | undefined = undefined;
    return forwardRef((props: P, ref) => {
        if (!promise) {
            promise = loader();
        }
        const Component = use(promise);

        return (<Component {...props} ref={ref} />)
    });
};

const LazyCallout = myLazy(() => {
    return import('@blog/components/Callout').then(m => m.Callout)
}); We use closure to create a state hidden from outside code but available to all instances of the lazy component we return (like ). The load of the actual component will be triggered on the first render of the first instance of the lazy component, later calls will reuse cached promise. LazyCallout Poor man's <Offscreen /> You can already use , but that will require using React from the experimental channel. If that is not something you would like but you still want to have Offscreen, we can mimic it with Suspense. Implementation is a bit lengthy, so bear with me. <Offscreen /> // This function returns promise which can be resolved from outside
const createPromiseWithResolve = () => {
    let resolve: () => void = () => { };
    const promise = new Promise<void>((_resolve) => {
        resolve = _resolve;
    });

    return { promise, resolve };
};


function usePrevious<T>(value: T) {
    const ref = useRef<T | undefined>(undefined);
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
}

const Offscreen = ({ children, mode }: { 
    children: ReactNode, 
    mode: 'hidden' | 'visible' 
}) => {
    const previousMode = usePrevious(mode);
    const promiseRecordRef = useRef<
        ReturnType<typeof createPromiseWithResolve> | undefined
    >(undefined);

    if (previousMode !== mode || !promiseRecordRef.current) {
        promiseRecordRef.current?.resolve();
        promiseRecordRef.current = mode === 'hidden' ?
            createPromiseWithResolve()
            : { promise: Promise.resolve(), resolve: () => { } };
    }
    return (<Suspense>
        <OffscreenInner promise={promiseRecordRef.current.promise}>
            {children}
        </OffscreenInner>
    </Suspense>);
};

const OffscreenInner = ({ children, promise }: { 
    children: ReactNode, 
    promise: Promise<void> 
}) => {
    use(promise);
    return (<>{children}</>)
};

// --- Usage:
const ControlledOffscreen = () => {
    const [showRed, setShowRed] = useState(true);
    const [showGreen, setShowGreen] = useState(true);

    return (<div>
        <div>
            <Button onClick={() => setShowRed(true)}>
                Show red
            </Button>
            <Button onClick={() => setShowRed(false)}>
                Hide red
            </Button>
            <Button onClick={() => setShowGreen(true)}>
                Show green
            </Button>
            <Button onClick={() => setShowGreen(false)}>
                Hide green
            </Button>
        </div>

        <div>
            <Offscreen mode={showRed ? 'visible' : 'hidden'}>
                <div style={{ color: 'red' }}>Red</div>
            </Offscreen>
            <Offscreen mode={showGreen ? 'visible' : 'hidden'}>
                <div style={{ color: 'green' }}>Green</div>
            </Offscreen>
        </div>
    </div>);
}; The main work is done inside the component. On the first render, we create a new promise: depending on the prop it will either be already resolved or pending. We then supply this promise to . Since we render a suspense boundary inside our component, we need another component inside this boundary to suspend. If we call in our parent component, it will propagate to the suspense boundary outside the component (if there is one), and this is not the behavior we need. So we use an additional component just to call there. We keep track of the previous value of and if it changes, we resolve the current promise and generate a new one. <Offscreen /> mode OffscreenInner use use mode Offscreen will be useful if you want to keep some components mounted but not display any of their DOM nodes. For example, if you're writing a router, you might want to keep routes mounted to improve the speed of navigation. Of course, you can just flip style based on property: , but with this approach, React won't clean up layout effects, which might bring some issues. <div style={{display: mode === 'visible' ? 'block' : 'none'}} /> This approach has one significant downside (except its sheer kludginess). If a promise isn't resolved by itself (just like in our case) it significantly slows down your SSR since the server will wait for some time before triggering timeout and then try to resolve the promise on the client instead, which will make your site feel slower. This is something that might be solved by the API, but it's also only in the experimental channel. postpone Anyways, this is really it for today. Let me know if you have any questions, and stay tuned for my guide on Concurrent React! Also published here. Lead photo by from Unsplash Filip Zrnzević

Guide to React Suspense: From Code Splitting to Data Fetching

Hey guys! This is the "Getting Started" Guide for the , listed on the . Medium API (Unofficial Version) RapidAPI Platform This REST API , without any hassle. helps you to quickly extract data from Medium Dotcom https://www.youtube.com/watch?v=oc8TKG9EQfE&embedable=true Using our Unofficial Medium Dotcom API, you can get- 's - Info, Articles, Top Articles, Followers, Following, Interests, Lists, Publications User 's - Info, Responses, Content, Markdown, HTML, Fans, Related Articles Article 's - Info, Articles, Newsletter Publication Top Feeds, Latest Posts, Top Writers, Tag Info, Related Tags - Info, Articles, Responses List's - Articles, Publications, Users, Lists, Tags Search 💡 Checkout our for the details on each endpoint! swagger documentation Before getting started, you must first to authenticate your calls. You'll need to , along with the requests, to use the API smoothly. get your API Key pass it in the headers Header - x-rapidapi-key: [RAPIDAPI_KEY] Wondering how to subscribe to our API and get an API Key? Watch the following video – https://www.youtube.com/watch?v=-MM1C6mb-mc&embedable=true API's Base URL: https://medium2.p.rapidapi.com GET User ID Every Medium user has one unique hash ID associated with his/her account. Usually, we only deal with usernames that we choose while registering on the Medium Platform. You can find your username in the sub-domain of your profile page URL or at the end of it. Like - https:// username .medium.com https:// medium.com/@ username Once you get your username, like mine is you can use the following endpoint to get your . nishu-jain, user_id Endpoint - GET /user/id_for/{username} Usage - Once you have the , you can invoke other user-related endpoints using it. user_id https://gist.github.com/weeping-angel/ac33f3d869ea8a859052fbb98e988385?embedable=true GET User Info Once you've got the , you can use it to get user-related information such as - user_id Full name, Username, Bio, Followers and Following count, Twitter username, Profile-image, top writer status, etc ... Endpoint - GET /user/{user_id} If you don't have the , see the endpoint above. user_id GET User ID Usage - https://gist.github.com/weeping-angel/c26f5b68a01c5482f5a712e0a652fdd3?embedable=true GET User's Articles This endpoint returns a list of articles ( ) written by the Medium user. article_ids 💡 You can then use the endpoint to retrieve information, such as related to your desired article. GET Article Info title, subtitle, author, claps, voters, tags, topics, publication, etc..., Endpoint - GET /user/{user_id}/articles Usage - https://gist.github.com/weeping-angel/c0c133d64268a9ef2a4eb62e0408f474?embedable=true GET User's Top Articles This endpoint returns a list of of the top 10 posts/articles on the user's profile (usually in chronological order - most recent posts), for the given user ( ). aritcle_ids user_id 💡 You can then use the endpoint to retrieve information on individual articles. GET Article Info Endpoint - GET /user/{user_id}/top_aritcles Usage - https://gist.github.com/weeping-angel/c64fb4791441951deeaaac458672879b?embedable=true GET User's Following This endpoint returns a list of of the given user's following. user_ids You can fetch this list and use the endpoint to retrieve information related to the individual users. GET User Info Currently, this list does not contain the of the publications that the user is following. Note: publication_ids Query Parameters : - (Optional) : To limit the number of results. ( <= 1500) count count Endpoint - GET /user/{user_id}/following Usage — https://gist.github.com/weeping-angel/7f3d13b52205e5b48a0edba8a8677bfe?embedable=true GET User's Followers This endpoint returns a list of of the followers for the given user. user_ids The length of followers' list might be different from what you get in the Endpoint. It's because, this list doesn't include Medium Users who left the platform. Note: Get User Info If you really need the exact followers' count, use this endpoint to get the followers' list and take its length as the exact followers' count You can use the endpoint to retrieve information related to the individual users. GET User Info Query Parameters : - (Optional) : To limit the number of results. ( <= 1500) count count Endpoint - GET /user/{user_id}/followers Usage - https://gist.github.com/weeping-angel/66e7ee163f48e426dec93fbded420802?embedable=true GET User's Interests This endpoint returns a list of that the given user follows on Medium. tags All tags are lowercase hyphen-separated strings. Endpoint - GET /user/{user_id}/interests Usage — https://gist.github.com/weeping-angel/deb68d4ac20f29fae389bc78d2bab6a4?embedable=true GET User's Lists This endpoint returns an array of created by the user. list_ids You can use the endpoint to retrieve information on individual Medium Lists. GET List Info Endpoint - GET /user/{user_id}/lists Usage - https://gist.github.com/weeping-angel/42ae06edabb0fc32d8047356b88685ab?embedable=true GET User's Publications This endpoint returns a list of where the user is the editor and/or creator. publication_ids You can use the endpoint to retrieve information on individual publications. GET Publication Info Endpoint - GET /user/{user_id}/publications Usage - https://gist.github.com/weeping-angel/177663bcaf85d98d3504a6df8889714e?embedable=true GET Article Info This endpoint returns the article-related information such as (as assigned by Medium), Title, Subtitle, Author, Tags, Topics Publication, Published date and time, Clap Count, Voter Count, Word Count, Responses Count, Reading Time, Language, etc... For using this endpoint, you'll need an article's unique hash ID, called . article_id You can find the at the end of any Medium Story's URL. Like - article_id medium.com/towards-artificial-intelligence/.. 67fa62fc1971 nishu-jain.medium.com/the-neutrality-of-dea.. 20abb01e5c85 Endpoint - GET /article/{article_id} Usage - https://gist.github.com/weeping-angel/3946e149d9b99b00e16fca59845ea2d3?embedable=true GET Article's Content This endpoint returns the textual content of an article/story, for the corresponding . article_id You can get the from the URL, as shown above in the endpoint. article_id GET Article Info Endpoint - GET /article/{article_id}/content Usage - https://gist.github.com/weeping-angel/d64a3b2a09ad468abc517949379b1c0b?embedable=true GET Article's Markdown This endpoint returns the article content in the markdown format ( ), for the corresponding . .md article_id You can get the from the URL, as shown above in the endpoint. article_id GET Article Info Endpoint - GET /article/{article_id}/markdown Usage - https://gist.github.com/weeping-angel/a692fc43a7f8a85aa25e358baf0544d6?embedable=true GET Article's HTML This endpoint returns the article in plain HTML format ( ), for the corresponding . .html article_id You can get the from the URL, as shown above in the endpoint. article_id GET Article Info Query Parameter ( ):- Optional Set parameter to to get the full HTML page with head, body, title, and meta tags. If is set to or not provided, the endpoint will only return the HTML inside the body tag. fullpage true fullpage false Endpoint - GET /article/{article_id}/html GET /article/{article_id}/html?fullpage=true Usage - https://gist.github.com/weeping-angel/7a2ccc872b043fd0113fe418515a8631?embedable=true GET Article's Responses This endpoint returns a list of responses ( , same as ) for a given article ( ) response_ids article_ids article_id You can treat pretty much same as . To see the content of the response, use the endpoint. Note: response_id aritcle_id Get Article's Content Endpoint - GET /article/{article_id}/responses Usage - https://gist.github.com/weeping-angel/5e7b360bd7e3a03e3035a036a50e22c8?embedable=true GET Article's Fans This endpoint returns a list of of the people who clapped on the article. user_ids You can use the endpoint to retrieve information on individual users. GET User Info Endpoint - GET /article/{article_id}/fans Usage - https://gist.github.com/weeping-angel/dc15a0310469816a9b0317b975da24a8?embedable=true GET Related Articles This endpoint returns a list of of the related posts. article_ids (Length = 5) If the article is self-published, related posts will belong to the same author. Else, related posts will belong to the publication in which the article is published. Note: Endpoint - GET /article/{article_id}/related Usage - https://gist.github.com/weeping-angel/8157dcb20427892dfe12d06ef3406217?embedable=true GET Publication ID Every Medium Publication has one unique hash ID associated with it. Usually, we only deal with that is generated when we choose our Publication's Name. You can find your in the homepage URL of your publication. Like - publication_slug publication_slug https:// medium.com / publication_slug Once you get your , you can use the following endpoint to get your . publication_slug publication_id Endpoint - GET /publication/id_for/{publication_slug} Usage - https://gist.github.com/weeping-angel/dbd1ee3e532789a662f85b54a9449bdc?embedable=true GET Publication Info This endpoint returns publication-related information such as for the corresponding . Publication name, Tagline, Description, Tags, Followers Count, Creator, Editors, Twitter username, Instagram username, Facebook Page name, Logo, Domain, etc ... publication_id A is the unique hash ID associated with every Medium Publication. For example, of is publication_id publication_id TowardsDataScience "7f60cf5620c9". If you don't know the , you can get it from any article published under it. Use the endpoint to retrieve the . Or, if you know the , use the endpoint . publication_id , GET Article Info publication_id publication_slug GET Publication ID Endpoint - GET /publication/{publication_id} Usage - https://gist.github.com/weeping-angel/e73f4c180b71fed2de9160dff38d25be?embedable=true GET Publication Articles This endpoint returns the list of of the latest 25 articles, posted recently in that publication. articles_ids You can use the endpoint to retrieve information on individual articles. GET Article Info Query Parameter (Optional): - : Use the query parameter to get the articles before that date and time. from from Endpoint - GET /publication/{publication_id}/articles Usage - https://gist.github.com/weeping-angel/d4ba88bd29cf3482927e77e87ed236d7?embedable=true GET Publication's Newsletter This endpoint returns information related to the associated newsletter for the given publication. This includes their , name, description, creator's id subscriber's count, unique id, image url, etc... Endpoint - GET /publication/{publication_id}/newsletter Usage - https://gist.github.com/weeping-angel/4ed062ced5c2068cec38567f62d497f4?embedable=true GET Latest Posts This endpoint returns a list of the latest posts ( ) under a topic/niche (as classified and by the Medium platform). article_ids distributed Examples of a topic/niche can be: blockchain artificial-intelligence relationships mental-health, etc ... These are known as . (Not same as ) topic_slugs tags At any given moment, this endpoint will return a list of 25 articles ( ). You can then endpoint to retrieve information related to each article. article_ids GET Article Info Endpoint – GET /latestposts/{topic_slug} Usage – https://gist.github.com/weeping-angel/dad4f1382928798b5d2dbfd1fd9c8c38?embedable=true GET Top Writers This endpoint returns a list of top writers ( ) within a particular topic/niche (using ). user_ids topic_slug Examples of are – topic_slug blockchain relationships artificial-intelligence, etc ... You can use an optional query parameter to specify the number of top writers you want to retrieve. count Maximum number of top writers within a topic will be 250. Note: After fetching the , you can use the endpoint to extract information related to the individual users. user_ids GET User Info Endpoint – GET /top_writers/{topic_slug} GET /top_writers/{topic_slug}?count={count} Usage — https://gist.github.com/weeping-angel/9217562c854f85a2c949fb497ceb8cbc?embedable=true GET Top Feeds This endpoint returns a list of (default count = 25) for the given and . article_ids tag mode Example of a will tag ‘blockchain', ‘defi', ‘artificial-intelligence', etc... Mode: : For getting trending articles hot : For getting the latest articles new : For getting the best articles of the year top_year : For getting the best articles of the month top_month : For getting the best articles of the week top_week : For getting the best articles of all time top_all_time You can use the endpoint to retrieve information related to each article. Note: GET Article Info Query Parameters ( ): - Optional To get the subsequent top feeds, it can also take a query string parameter called , where, < 250. after after To limit the number of top feeds, use another query string parameter called , where < 25. count count Endpoint - GET /topfeeds/{tag}/{mode} Usage - https://gist.github.com/weeping-angel/8be504accef43976d161cd0b72c23009?embedable=true Get Tag Info This endpoint returns tag-related information for the given . This includes: tag Tag Name Followers Count Number of stories Number of writers Number of latest stories Number of latest writers are lowercased, hyphen-separated strings representing a category or niche on Medium Platform Note: tags Endpoint - GET /tag/{tag} Usage - https://gist.github.com/weeping-angel/03c46c14b2e9be11ca61d724dad3694d?embedable=true Get Related Tags This endpoint returns a list of for a given . related_tags tag For the tag , it will return . Example: blockchain "cryptocurrency", "bitcoin", "ethereum", "crypto", "ico", "technology", "defi", "nft", "fintech" Endpoint - GET /related_tags/{tag} Usage - https://gist.github.com/weeping-angel/6a0628389b1b1b27b9cc893c7c0181f4?embedable=true GET List Info This endpoint returns the Medium's information - such as for the given list-related id, name, author, description, thumbnail image url, creation datetime, last modified datetime, number of articles in the list, claps, voters, and comments - list_id . The is the unique hash ID associated with every Medium List. You can see it at the end of the URL as follows: list_id https:// /list/medium-api- nishu-jain.medium.com 38f9e0f9bea6 Here is the . 38f9e0f9bea6 list_id Endpoint - GET /list/{list_id} Usage - https://gist.github.com/weeping-angel/f3c985b9626491950f379d25ea0c7e12?embedable=true GET List Articles This endpoint returns an array of present in the given Medium List. article_ids You can use the endpoint to retrieve information on individual articles. GET Article Info Endpoint - GET /list/{list_id}/articles Usage - https://gist.github.com/weeping-angel/8c5fcebc9b90574209a00fe82651dc8b?embedable=true GET List Responses This endpoint returns an array of for the given Medium List. response_ids You can treat pretty much same as . To see the content of the response, use the endpoint. Note: response_id aritcle_id Get Article's Content Endpoint - GET /list/{list_id}/responses Usage - https://gist.github.com/weeping-angel/e6668982cef713eff2ac41e95013d442?embedable=true Search Articles This endpoint returns a list of that match the search query. The maximum length of this list will be 1000. If no articles are found that match the search query, then an empty list will be returned. article_ids Query Parameter : - (Required) : A string parameter that specifies the search query for which the articles need to be retrieved. query You can use the endpoint to retrieve information on individual articles. GET Article Info Endpoint - GET /search/articles?query={query} Usage - https://gist.github.com/weeping-angel/11c71118c79feeb2deea8552c77ca04c?embedable=true Search Publications This endpoint returns a list of that match the search query. The maximum length of this list will be 1000. If no publications are found that match the search query, then an empty list will be returned. publication_ids Query Parameter : - (Required) : A string parameter that specifies the search query for which the publications need to be retrieved. query You can use the endpoint to retrieve information on individual publications. GET Publication Info Endpoint - GET /search/publications?query={query} Usage - https://gist.github.com/weeping-angel/e24d6a9462175e8df40d11fec1d60a05?embedable=true Search Users This endpoint returns a list of that match the search query. The maximum length of this list will be 1000. If no users are found that match the search query, then an empty list will be returned. user_ids Query Parameter (Required): - : A string parameter that specifies the search query for which the users need to be retrieved. query You can use the endpoint to retrieve information on individual users. GET User Info Endpoint - GET /search/users?query={query} Usage - https://gist.github.com/weeping-angel/f5e63f8b87fb284d3562390093ac71a5?embedable=true Search Lists This endpoint returns an array of that match the search query. The maximum length of this array will be 1000. If no Medium Lists are found that match the search query, then an empty array will be returned. list_ids Query Parameter (Required): - : A string parameter that specifies the search query for which the Medium Lists need to be retrieved. query You can use the endpoint to retrieve information on individual Medium Lists. GET List Info Endpoint - GET /search/lists?query={query} Usage - https://gist.github.com/weeping-angel/21a7f30b191462850d236f55afb0fd23?embedable=true Search Tags This endpoint returns a list of that match the search query. The maximum length of this list will be 1000. If no tags are found that match the search query, then an empty list will be returned. tags Query Parameter : - (Required) : A string parameter that specifies the search query for which the tags need to be retrieved. query Endpoint - GET /search/tags?query={query} Usage - https://gist.github.com/weeping-angel/af8db800bc22ad5b226d58d5314a514b?embedable=true Final thoughts As of now, this API consists of 33 endpoints, all of which use the GET method. I'll try to add more endpoints in the future and improve its efficiency to provide you with the best [Unofficial] Medium API possible. You can subscribe to this API here: Medium API - RapidAPI Read its Swagger documentation here: API Documentation And if you're a Python programmer, do . Visit the following link to learn more about Unofficial Medium API's Python SDK. pip install medium-api GitHub - weeping-angel/medium-api If you've any thoughts on it, feel free to share them. I'll appreciate your feedback and try to improve it further. My email ID: nishu@mediumapi.com Thanks for reading and have a wonderful day! We post tutorials, videos, code snippets, and insights related to Medium and Unofficial Medium API. So be sure to follow us on: PS: Twitter: twitter.com/medium_api LinkedIn: www.linkedin.com/company/medium-api Also published . here

Your Official Guide to the Unofficial Medium Dotcom API for Fetching Data

: I tried to put as many code examples as possible to explain better. If you have difficulty understanding the code, I did a step-by-step walk-through at the end. Enjoy! Important note is a tool that simplifies the process of data fetching and the overall management of cached data for redux applications. It completely eliminates the need to hand-write data fetching and caching logic yourself. RTK Query is an optional add-on in the Redux Toolkit package. RTK Query Meaning it is built on top of the other APIs in Redux Toolkit. Typically, a web application will need to fetch data from a server to display. It also needs to make updates to that data, send those updates to the server, and keep cached data on the client in sync with the data on the server. Before RTK Query, implementing behaviors like loading, caching, and error components was convoluted. Even with the use of createAsyncThunk with createSlice, there is a fair amount of work to achieve certain implementations. RTK Query was introduced in June 2021, by the team in charge of Redux Toolkit. RTK Query primarily consists of two APIs: : The core of RTK Query's functionality. It allows you to define a set of endpoints that describe how to retrieve data from a series of endpoints, including the configuration of how to fetch and transform that data. In most cases, you should use this once per app, with "one API slice per base URL" as a rule of thumb. createApi() : A small wrapper around that aims to simplify requests. It is used to perform the actual network requests and handle the communication with your API server. fetchBaseQuery() fetch Together, createApi and fetchBaseQuery help you set up the foundation for making API requests and handling responses in RTK Query. Features of RTK Query Automatic API endpoint definition: RTK Query allows you to define API endpoints by simply providing a base URL and a set of endpoint-specific configurations. It abstracts away much of the boilerplate code typically required for making HTTP requests. import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
endpoints: (builder) => ({
getUsers: builder.query({
query: () => 'users',
providesTags: ['Users'],
}),
createUser: builder.mutation({
query: (user) => ({
url: 'users',
method: 'POST',
body: user,
}),
invalidatesTags: ['Users'],
 }),
}),
}); Intelligent data fetching and background updates: RTK Query provides intelligent data fetching capabilities, including support for pagination, optimistic updates, and background data refetching. It allows you to easily fetch and update data from APIs while handling common scenarios such as loading states, retries, and pagination. const { useGetUsersQuery } = api;
function UsersList() {
const { data, isLoading, isError, refetch } = useGetUsersQuery();
if (isLoading) {
return <div>Loading...</div>;
 }

if (isError) {
return <div>Error occurred while fetching users.</div>;
}
return (
<div>
{data.map((user) => (
<div key={user.id}>{user.name}</div>
 ))}
<button onClick={() => refetch()}>Refresh</button>
</div>
 );
} Normalized data structures: RTK Query normalizes API responses by default, ensuring that related entities are stored in a normalized form in the Redux store. This simplifies data manipulation and enables efficient updates and lookups. const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
endpoints: (builder) => ({
getUsers: builder.query({
query: () => 'users',
transformResponse: (response) => normalize(response.users, [userSchema]),
 }),
 }),
});

const userSchema = new schema.Entity('users');
const { useGetUsersQuery } = api; Built-in state management: RTK Query integrates seamlessly with Redux and leverages Redux Toolkit’s powerful state management capabilities. It automatically generates Redux slices for each API endpoint, providing preconfigured actions, reducers, and selectors that can be easily used in your application. const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
 },
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
); TypeScript support: RTK Query is built with TypeScript and provides strong typing throughout its API. It leverages TypeScript’s type inference to provide type-safe access to API data, including response payloads, query parameters, and error handling. interface User {
id: number;
name: string;
email: string;
}

const { useGetUsersQuery, useCreateUserMutation } = api;
function UsersList() {
const { data, isLoading, isError, refetch } = useGetUsersQuery();
if (isLoading) {
return <div>Loading...</div>;
  }

if (isError) {
return <div>Error occurred while fetching users.</div>;
}

return (
<div>
{data.map((user: User) => (
<div key={user.id}>{user.name}</div>
))}
<button onClick={() => refetch()}>Refresh</button>
</div>
);
} Customization and extensibility: RTK Query offers a flexible and extensible architecture that allows you to customize and override its default behavior. You can define custom hooks, modify cache behavior, intercept requests and responses, and extend the built-in functionality to fit your specific needs. const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
endpoints: (builder) => ({
getUsers: builder.query({
query: () => 'users',
transformResponse: (response) => customTransform(response),
 }),
 }),
});

function customTransform(response) {
return response.data.map((item) => ({ id: item.id, name: item.full_name }));
} Mindsetshift When using RTK Query, we are no longer thinking about “managing state” per se. Instead, we now think about “managing cached data.” Rather than trying to write reducers ourselves, we’re now going to focus on defining “where is this data coming from?”, “how should this update be sent?”, “When should this cached data be re-fetched?”, and “How should the cached data be updated?” Thank you for reading.

Coding Productively With RTK Query: Simplifying API Data Fetching and Caching

In the realm of modern app development, providing a seamless user experience is paramount. , as a popular JavaScript library, continually evolves to facilitate smoother interactions. One such evolution is the introduction of React Suspense for data fetching. In this tutorial, we'll delve into the world of data fetching with React Suspense. We'll explore how this powerful feature can simplify asynchronous operations in your app, leading to faster and more responsive user interfaces. React Prerequisites Before we dive into React Suspense, ensure you have a basic understanding of React and its concepts, including components, state, and props. Familiarity with JavaScript's ES6 syntax is also recommended. Content Overview Introduction to React Suspense and Data Fetching Setting up a Sample React Application Fetching Data with React Suspense Handling Errors and Fallbacks Concurrent Mode and Parallel Data Fetching 1. Introduction to React Suspense and Data Fetching React Suspense is a mechanism that enables components to "suspend" rendering while waiting for asynchronous data to load. This can greatly enhance user experience, as it prevents UI glitches and provides smooth transitions during data fetching. In this tutorial, we'll focus on using React Suspense for data fetching, leveraging its simplicity and efficiency. 2. Setting up a Sample React Application Let's start by setting up a basic React application using Create React App. Open your terminal and execute the following commands: npx create-react-app react-suspense-tutorial
cd react-suspense-tutorial
npm start This will create a new React application and start a development server. You can access the app by visiting in your browser. http://localhost:3000 3. Fetching Data with React Suspense In this section, we'll fetch data from an API using React Suspense. We'll use the API to retrieve sample data. First, let's create a new component called : fetch DataFetcher.js // DataFetcher.js
import React from 'react';

const fetchData = () =>
  fetch('https://jsonplaceholder.typicode.com/posts/1').then(response =>
    response.json()
  );

const DataFetcher = () => {
  const data = fetchData();
  return <div>{data.title}</div>;
};

export default DataFetcher; In the above code, we define a function that fetches data from a URL. Inside the component, we call this function and render the fetched data's title. However, this isn't fully utilizing React Suspense yet. fetchData DataFetcher 4. Handling Errors and Fallbacks To implement Suspense effectively, we need to use it with the function and the component. Let's modify our component: React.lazy Suspense DataFetcher.js // DataFetcher.js
import React from 'react';

const fetchData = () =>
  fetch('https://jsonplaceholder.typicode.com/posts/1').then(response =>
    response.json()
  );

const DataFetcher = () => {
  const data = fetchData();
  return <div>{data.title}</div>;
};

const DataFetcherWrapper = () => {
  const resource = fetchData();

  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <DataFetcher />
    </React.Suspense>
  );
};

export default DataFetcherWrapper; Here, we've wrapped our component inside . We've also used the component with a fallback UI to display while the data is being fetched. This way, the component won't render until the data is available. DataFetcher DataFetcherWrapper React.Suspense 5. Concurrent Mode and Parallel Data Fetching With Concurrent Mode, React allows components to render independently and concurrently, enhancing performance. Let's modify our code to demonstrate parallel data fetching: // DataFetcher.js
import React from 'react';

const fetchData = () =>
  fetch('https://jsonplaceholder.typicode.com/posts/1').then(response =>
    response.json()
  );

const DataFetcher = () => {
  const data = fetchData();
  return <div>{data.title}</div>;
};

const DataFetcherWrapper = () => {
  const resource = fetchData();

  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <React.ConcurrentMode>
        <DataFetcher />
      </React.ConcurrentMode>
    </React.Suspense>
  );
};

export default DataFetcherWrapper; In this code, we've wrapped the component inside , allowing the component to render concurrently. This can lead to improved performance, especially in complex applications with multiple asynchronous operations. DataFetcher React.ConcurrentMode Conclusion In this tutorial, we explored how to leverage for effortless data fetching in your applications. By employing techniques like handling errors, fallbacks, and Concurrent Mode, you can create smoother user experiences and more responsive interfaces. React Suspense simplifies the management of asynchronous operations, enabling developers to focus on building exceptional user interfaces. React Suspense

Effortless Data Fetching with React Suspense

Fetching token balances for one or more addresses (at a specific point in time) is a super common task, regardless of what it is that you’re building. Despite being such a common task, when I first started working with data I found it surprisingly difficult to figure out how to do this. It isn’t exactly obvious from just scrolling through the list of available endpoints Ethereum JSON-RPC Once you do figure it out, the other issue (even less obvious) is figuring out how to do this for multiple addresses across different time periods in a reasonable amount of time that won’t burn through all your credits. API In this article, I am going to save you the pain I had to go through figuring out the best way to fetch token balances. I’ll go over the different methods available (and their issues), starting with the “naive approach” and ending with the best approach. Overview: The naive approach Batching JSON-RPC requests Using a multicall contract Final remarks (link to code) The naive approach The naive approach is to make a single HTTP request using the “eth_call” JSON-RPC endpoint. Here’s the code: def fetch_token_balance_naive(wallet_address, token_address, block_number, node_provider_url, api_key):
    balanceof_function = "balanceOf(address)(uint256)"
    balanceof_signature = Signature(balanceof_function)
    block_number_hex = Web3.toHex(primitive=block_number)
    data = balanceof_signature.encode_data([wallet_address]).hex()
    payload = {
        "jsonrpc": "2.0",
        "method": "eth_call",
        "params": [
            {
                "to": token_address,
                "data": "0x" + data,
            },
            block_number_hex,
        ],
        "id": 1,
    }
    headers = {"Content-Type": "application/json", "Accept-Encoding": "gzip"}
    url = f"{node_provider_url}/{api_key}"
    res = requests.post(url, headers=headers, json=payload)
    res_data = res.json()
    balance_encoded_hex = res_data["result"]
    balance_encoded_bytes = Web3.toBytes(hexstr=balance_encoded_hex)
    balance_decoded = Call.decode_output(balance_encoded_bytes, balanceof_signature, returns=None)
    return balance_decoded There are a few things that are not so obvious if this is your first time using “eth_call” so let’s quickly go over these things. “eth_call” is the JSON-RPC endpoint used to call smart contract functions. “balanceOf” is a function that all ERC20 tokens have. You can call this function to return how much an address holds of the token in question. To use “eth_call” you need to specify two parameters: “to” and “data”. The “to” parameter is the address of the smart contract you want to call a function from. In the “data” parameter you specify the function you want to call and its inputs. Not super user-friendly: But to “data” requires you to encode the function name and inputs into a hexadecimal string. Similarly, the output of our call has to be decoded. To make life easier, I use the Call and Signature classes of the multicall package (see ) to help me with encoding and decoding. https://github.com/banteg/multicall.py The problem with the naive approach is that it’s (in terms of API credits). If you need to fetch balances for multiple addresses, blocks, and/or tokens. For each block, address, and token you need to perform a separate request. super slow and expensive Batching requests Batching requests alleviates some of the problems of the naive approach if you need to fetch balances for multiple blocks, addresses, and/or tokens. In particular, it helps . Instead of making multiple separate requests — batching enables you to do it in a single request. The code for batching “eth_call” requests is as follows: speed things up significantly def fetch_token_balance_batch(wallet_addresses, token_addresses, block_numbers, node_provider_url, api_key):
    balanceof_function = "balanceOf(address)(uint256)"
    balanceof_signature = Signature(balanceof_function)
    payload_list = []
    for i, (wallet_address, token_address, block_number) in enumerate(
        zip(
            wallet_addresses,
            token_addresses,
            block_numbers,
        )
    ):
        block_number_hex = Web3.toHex(primitive=block_number)
        data = balanceof_signature.encode_data([wallet_address]).hex()
        payload = {
            "jsonrpc": "2.0",
            "method": "eth_call",
            "params": [
                {
                    "to": token_address,
                    "data": "0x" + data,
                },
                block_number_hex,
            ],
            "id": i + 1,
        }
        payload_list.append(payload)
    headers = {"Content-Type": "application/json", "Accept-Encoding": "gzip"}
    url = f"{node_provider_url}/{api_key}"
    res = requests.post(url, headers=headers, json=payload_list)
    res_data_list = res.json()
    balances = []
    for res_data in res_data_list:
        balance_encoded_hex = res_data["result"]
        balance_encoded_bytes = Web3.toBytes(hexstr=balance_encoded_hex)
        balance_decoded = Call.decode_output(balance_encoded_bytes, balanceof_signature, returns=None)
        balances.append(balance_decoded)
    return balances Some things to keep in mind: You can’t batch an unlimited number of requests. You’re allowed by your plan. (This depends on the node provider you use.) limited by the maximum response size, and maximum number of requests per second Despite being much faster than the naive approach, the problem with batching is that you will still end up using the same amount of API credits. Depending on your use-case this can be . cost prohibitive Using a multicall contract Multicall contracts are smart contracts that allow multiple function calls to be bundled together and executed as a single function call. Similar to batching requests, using a multicall significantly speeds up bulk fetching balances. Instead of being charged for each separate “eth_call” request, you’ll only be charged for a single request. The other benefit: It’s a lot more cost efficient. The code that uses the multicall contract is a bit long. To make it more readable I have broken the code up into two functions: the main function and the inner function . fetch_token_balance_multicall create_multicall_payload_list def fetch_token_balance_multicall(wallet_addresses, token_addresses, block_numbers, node_provider_url, api_key):
    block_map = defaultdict(lambda: [])
    for block_number, token_address, wallet_address in zip(block_numbers, token_addresses, wallet_addresses):
        block_map[block_number].append((token_address, wallet_address))
    aggregate_function = "tryBlockAndAggregate(bool,(address,bytes)[])(uint256,uint256,(bool,bytes)[])"
    aggregate_signature = Signature(aggregate_function)
    balanceof_function = "balanceOf(address)(uint256)"
    balanceof_signature = Signature(balanceof_function)
    payload_list = create_multicall_payload_list(block_map, aggregate_signature, balanceof_signature)
    headers = {"Content-Type": "application/json", "Accept-Encoding": "gzip"}
    url = f"{node_provider_url}/{api_key}"
    res = requests.post(url, headers=headers, json=payload_list)
    res_data_list = res.json()
    balances = []
    for res_data in res_data_list:
        output_hex = res_data["result"]
        output_bytes = Web3.toBytes(hexstr=output_hex)
        returns = None
        decoded_output = Call.decode_output(
            output_bytes,
            aggregate_signature,
            returns,
        )
        output_pairs = decoded_output[2]
        for flag, balance_encoded in output_pairs:
            balance_decoded = Call.decode_output(balance_encoded, balanceof_signature, returns)
            balances.append(balance_decoded)
    return balances The logic is very similar to what we have already seen in the previous sections. All the interesting logic is contained in . That being said, there is still one thing worth mentioning: fetch_token_balance_multicall create_multicall_payload_list combines both request batching and the use of a multicall contract. The request batching was implemented to enable us to fetch historical balances across multiple blocks in a single call. fetch_token_balance_multicall Now the interesting code: def create_multicall_payload_list(block_map, balanceof_signature, aggregate_signature):
    multicall3_address = "0xcA11bde05977b3631167028862bE2a173976CA11"
    state_override_code = load_state_override_code()
    require_success = False
    gas_limit = 50000000
    payload_list = []
    for i, block_number in enumerate(block_map.keys()):
        block_number_hex = Web3.toHex(primitive=block_number)
        call_params_list = []
        for token_address, wallet_address in block_map[block_number]:
            call_params_list.append(
                {
                    "to": token_address,
                    "data": balanceof_signature.encode_data([wallet_address]),
                },
            )
        multicall_params = [
            {
                "to": multicall3_address,
                "data": Web3.toHex(
                    aggregate_signature.encode_data(
                        [
                            require_success,
                            [[c["to"], c["data"]] for c in call_params_list],
                        ]
                    )
                ),
            },
            block_number_hex,
        ]
        if gas_limit:
            multicall_params[0]["gas"] = Web3.toHex(primitive=gas_limit)
        if state_override_code:
            multicall_params.append({multicall3_address: {"code": state_override_code}})
        payload = {
            "jsonrpc": "2.0",
            "method": "eth_call",
            "params": multicall_params,
            "id": i + 1,
        }
        payload_list.append(payload) The function creates the payload_list for a batch JSON-RPC request. For each block we create a separate payload and append it to the list. create_multicall_payload_list Each payload is an “eth_call” request. The call we are making is to the function, which requires us provide it with the list of calls we want to aggregate into a single call. tryBlockAndAggregate(bool, (address,bytes)[])(uint256, uint256,(bool,bytes)[]) Things to note: If the number of balances you’re fetching is large you should set a high value for “gas_limit”. The value of 50000000 will almost always work. “state_override_code” is a long hexadecimal string that needs to be provided in order for us to be able to fetch historical balances. The multicall contract I am using can be found . But, it’s also possible to use other multicall contracts. here Final remarks All code and test cases can be found on my Github here: . https://github.com/martkir/get-erc20-balance If you have any questions or want to give feedback on anything I have written you can let me know on Twitter @martkiro If you’re working with onchain data you might also be interested in checking out where we are indexing the Ethereum blockchain :) https://www.syve.ai

The Best Method for Bulk Fetching ERC20 Token Balances

Using Next.js 13’s Bleeding-Edge Features for Data Fetching

It’s good practice to show the user that the app is loading data. This is done by showing a loading indicator, and hiding the content until the data is ready. Most of us will be maintaining a state in the component that tracks whether the data is ready or not and this is repeated in every component that calls an API. Consider the following example: Todos component import React, { useState, useEffect } from "react";
const Todos = () => {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);  useEffect(() => {
    const init = async () => {
      try {
        setLoading(true);
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/todos"
        );
        const data = await response.json();
        setTodos(data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    init();
  }, []);  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error</div>;
  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}; TODO details const Todo = ({ id }) => {
  const [todo, setTodo] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);  useEffect(() => {
    const init = async () => {
      try {
        setLoading(true);
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/todos/${id}`
        );
        const data = await response.json();
        setTodo(data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    init();
  }, [id]);  if (loading) return <div>Loading 2...</div>;
  if (error) return <div>Error 2</div>;
  return (
    <div>
      <h1>{todo.title}</h1>
    </div>
  );
}; As we can see, There are three main things that are happening in the code: The first thing is that we are showing a loading indicator while the fetch is happening. The second thing is that we are handling the error if there is one. The third thing is that we are setting the todo state to the data that we got back from the API. Note: Data fetching logic is the same in both components. We can create a custom hook that will be used to handle all asynchronous data fetching and updating the state. Custom hook(useAsync) React hooks are a set of functions that can be used to create a component that is more flexible than the traditional component lifecycle. We can create a custom hook that will be used to handle all asynchronous data fetching and updating the state. useAsync hook import React, { useState, useEffect } from "react";const useAsync = (defaultData) => {
  const [data, setData] = useState({
    data: defaultData ?? null,
    error: null,
    loading: false,
  });  const run = async (asyncFn) => {
    try {
      setData({ data: null, error: null, loading: true });
      const response = await asyncFn();
      const result = { data: response, error: null, loading: false };
      setData(result);
      return result;
    } catch (error) {
      const result = { data: null, error, loading: false };
      setData(result);
      return result;
    }
  };  return {
    ...data,
    run,
  };
}; Todos component import React, { useState, useEffect } from "react";
import { useAsync } from "./hooks";
const Todos = () => {
  const { data, loading, error, run } = useAsync([]);  useEffect(() => {
    run(() => fetch("https://jsonplaceholder.typicode.com/todos").then((res) => res.json()));
  }, []);  // Same as above
  return ...
}; TODO details import React, { useState, useEffect } from "react";
import { useAsync } from "./hooks";
const Todo = ({ id }) => {
  const { data, loading, error, run } = useAsync(null);  useEffect(() => {
    run(() => fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then((res) => res.json()));
  }, [id]);  // Same as above
  return ...
}; We have reduced the amount of code we have to write by using the custom hook. It’s also easier to read and maintain the code. NOTE: Let’s add more functionality to our custom hook Add caching to the custom hook to prevent API calls if data is already present in the state. import { useState, useCallback } from "react";const cache = new Map();
const defaultOptions = {
  cacheKey: "",
  refetch: false,
};export const useAsync = (defaultData?: any) => {
  const [data, setData] = useState({
    data: defaultData ?? null,
    error: null,
    loading: false,
  });  const run = useCallback(async (asyncFn, options = {}) => {
    try {
      // Merge the default options with the options passed in
      const { cacheKey, refetch } = { ...defaultOptions, ...options };      const result = { data: null, error: null, loading: false };      // If we have a cache key and not requesting a new data, then return the cached data
      if (!refetch && cacheKey && cache.has(cacheKey)) {
        const res = cache.get(cacheKey);
        result.data = res;
      } else {
        setData({ ...result, loading: true });
        const res = await asyncFn();
        result.data = res;
        cacheKey && cache.set(cacheKey, res);
      }
      setData(result);
      return result;
    } catch (error) {
      const result = { data: null, error: error, loading: false };
      setData(result);
      return result;
    }
  }, []);  return {
    ...data,
    run,
  };
}; TODO details import React, { useState, useEffect } from "react";
import { useAsync } from "./hooks";
const Todo = ({ id }) => {
  const { data, loading, error, run } = useAsync(null);  useEffect(() => {
    run(() => fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
        .then((res) => res.json()),
        {cacheKey: `todo-${id}`});
  }, [id]);  // Same as above
  return ...
}; Options: The key that we will use to store the data in the cache. cacheKey: If we want to refetch the data from the API. This is useful when we want to refresh the data in the cache. refetch: Cache is available globally, so we can use it in other components. If we use useAsync in multiple components with the same cacheKey, then cache data will be shared across all the components. This is useful when we want to avoid unnecessary API calls if the data is already present in the cache. NOTE: React Query and SWR are two popular libraries that can be used to handle all asynchronous data fetching. Live example, here Lead Images . source Also published here. Thank you for reading 😊 Got any questions or additional? please leave a comment.

Creating a Custom Hook for Fetching Asynchronus Data: useAsync Hook with Cache

Fetching Places From Google Maps with Flutter

What is Happening? DabbaFlow, an end-to-end encrypted file-sharing platform developed by , a Cambridge-based artificial intelligence lab was by Fetch.ai recently. Using DabbaFlow, the first addition to Fetch.ai's CoLearn ecosystem, users can get more control over their data and transform it into meaningful business results while maintaining their information's privacy and security through encryption and cryptography. Fetch.ai released is a data-sharing platform that leverages blockchain technology to offer control and ownership of users’ data. DabbaFlow uses proxy re-encryption, a type of cryptography that uses proxy servers to generate decryption keys for third parties. Through DabbaFlow international data transfers can be executed in a decentralized and secure environment which is a secure way to transfer data in compliance with personal data protection regulations. DabbaFlow What is Fetch.ai? The Cambridge-based artificial intelligence lab, is constructing the infrastructure for intelligent autonomous protocols that can assist in doing productive economic labour on behalf of people, machines, enterprises and organisations. Using open-source technology, the network allows users access to a world-scale, secure dataset that can be used to perform complicated coordinating tasks in the contemporary economy. Fetch.ai Fetch.ai Why is it Critical to Protect Data During Data Transfers Encryption is a common method of protecting data while it is in transit or at rest. It is common for companies to encrypt sensitive data before transferring it or utilise encrypted connections (HTTPS, SSL, TLS, FTPS) to secure the contents of data in transit when encrypting sensitive information. To prevent third parties from accessing the data as it moves from one device to another through the internet, wired or wireless connections, encryption is highly recommended by regulators, especially when transmitting data over a wireless network like Wi-Fi or over an untrusted network. Using secure communication protocols such as TLS, Distributed Ledger Technologies or a Virtual Private Network (VPN) ensures that the content of the transmission cannot be deciphered if intercepted, provided the mechanism is suitably implemented. In the absence of further encryption techniques such as encrypted data storage, the data will only be encrypted while in transit and stored on the recipient's system in the same form as the data controller's system. If your data is valuable, attackers will try to get their hands on it regardless of whether it's in motion, at rest, or actively being used; they'll go for it in any of these three states since it's the most convenient. Due to this, a proactive strategy including data classification and categorization, as well as content, user, and context-aware security policies, is the safest and most effective method to safeguard your most sensitive information in any condition using new age technologies such as blockchain, cryptography and encryption based protocols. Understanding the Importance of Data Transfers and Privacy through Cryptography New issues arise due to the increasing importance of data exchanges in today’s digital world. With the rise of remote working and remote cooperation, there has been a remarkable rise of new companies, resulting in an exponential increase in the amount of data exchanged online. This has resulted in a considerable increase in the danger of data breaches for people and businesses that store sensitive information online with a centralized point of failure. Privacy-based data transfers are promoted by the regulators, which supports the transfer of data through encryption. Since DabbaFlow is decentralized, it avoids the problem of having a single point of failure. Centralized systems are more vulnerable to attack if the primary server is hacked. It’s not possible for a single node to fail since DabbaFlow operates on the fetch.ai blockchain, which is distributed across several nodes. There is a public record of data being exchanged, which is another benefit. Due to the blockchain’s data exchange record, neither the sender nor the recipient may claim to have transmitted or received something that has not been executed. Due to this, blockchain-based data file sharing systems can help enterprises transfer data safely and securely through encryption and decentralized database management systems. Final Thoughts on DabaFlow and Encryption of Data Protecting user data during data transfers is critical for companies to ensure that there is no breach of data privacy. I believe that solutions that provide a decentralized and encrypted technology to protect user data during information flow between jurisdictions are a novel use of blockchain technology which can disrupt the big data industry. Don’t forget to share and like the story! Image credits: , , Markus Spiske and . Carlos Muza Farzad Clément Hélardot

Fetch.ai Releases DabbaFlow: Encrypted File Sharing Platform for Secure Data Transfers 

Artificial Intelligence and Blockchain come to Famous Football Club The men's and women's teams of have named as their first official artificial intelligence partner. The East London's West Ham United Football Club competes in England's Premier League, the highest division of professional football. In 2016, the team relocated from Boleyn Ground to London Stadium. West Ham United is one of the most famous clubs in London. West Ham United Fetch.ai The Cambridge-based artificial intelligence firm Fetch.ai utilizes artificial intelligence to eliminate third parties and give customers control. This implies that Fetch.ai will let users obtain complete control over their digital interactions, such as making travel reservations, reserving a hotel and a parking spot, and managing their social media accounts. Fetch.ai works with a wide range of businesses in the industrial, supply chain, healthcare, and mobility sectors on a commercial level. Fetch.AI is a blockchain-based platform that integrates AI and machine learning skills  In the present digital economy. Aggregators are no longer necessary because these digital twins connect the dots across various data sources. Supply chain, manufacturing, healthcare, travel, finance, and mobility are areas where 's product set of applications may be used. Fetch.ai and West Ham United have agreed to work together to promote the positive effect of artificial intelligence on companies and the lives of its fans. 's brand will be promoted through the London Stadium's LED perimeter advertising system and the Club's ever-expanding worldwide platforms as part of their partnership with the Club. Fetch.ai Fetch.ai Understanding the Use of Artificial Intlieggence in Football Thanks to artificial intelligence, it is feasible to evaluate data in a manner that wasn't conceivable. Statistical analysis and performance optimization based on data are also part of this process. In today's ultra-competitive environment, a company needs the most up-to-date technologies to have the most possibilities and the best decision-making ability possible. In many countries, soccer is more than just a sport since it creates a trip of emotions for its enthusiasts. Applications for evaluating athletic performance make use of AI capabilities and methodologies. These tools may automatically analyze playing strategy to provide real-time, exact feedback that can help players improve their performance and decision-making. Biomechanics sensors are used to create 3D representations of athletes' movements. A visual representation of game data reveals how players perform rather than how they rank. It is common practice to utilize traditional sports analytics to offer information such as shots taken or compare players' performance and statistics. Still, the application of deep learning algorithms breaks down athletes' decision-making capabilities. With it, coaches and teams have a real-time tool for evaluating defensive athletes' performance in any game setting. Professional footballers' salary rates and data science techniques. Whether or not the world's most highly compensated footballers are overpaid is an open question. Computational models have been developed to indicate which players are paid too much and which ones are undervalued and identify the skills that might help players earn more Euros. According to a computer model, Lionel Messi is the most overpaid football player in the world. Some of Europe's best footballers are getting huge payoffs, while other players on the same field are getting much less. Football fans may wonder whether their rivals are worth such a hefty sum of money. For example, FC Barcelona star Lionel Messi earns millions of dollars more than other players in the league. were examined using machine learning , the ability to see the field is just as important to a footballer's success as their ability to control the ball. Mentors might help young footballers develop into better players if they focus more on teaching them how to analyze the field rather than just playing the game with the ball. Young players need to learn how to read the game just as much as they need to learn how to kick a ball. Mentors should spend more time preparing young players for the real world rather than just teaching them how to control the ball. According to experts Florida Atlantic University researchers are to predict recovery time from sports-related damage induced by a head impact based on side symptoms including migraine, giddiness, and exhaustion. The findings of this study may be used to build a decision-support system that can help doctors develop a treatment plan for injured athletes that is specifically tailored to their needs. The risk of a soccer player suffering a concussion may be reduced by simply adapting to the ball. It is estimated that as many as 22% of soccer wounds are caused by players using their heads to transfer the ball during games. Researchers looked at factors determining the peak impact force of soccer headers and suggested ways to reduce the risk of head injuries to prevent soccer player injuries. teaching computers Catch all the breaking news, and Don’t forget to like the story! Image Credits: and . Samuel Regan-Asante Hert Niks The content of this story DO NOT represent the views of HackerNoon and are meant as information only from the lens of the independent contributor. Please DYOR before investing.

West Ham United Partners with Fetch.ai to Increase Awareness about Artificial Intelligence

MEXC Global and Bybit announce a web3 ecosystem fund of $150 million to support artificial intelligence-based decentralized smart contract infrastructure on Fetch.ai. Is Machine Learning-Based Blockchain the Next Generation of Cryptography? and announced an ecosystem fund of $150 million to support applications on the machine learning-based blockchain ecosystem of , a Cambridge-based artificial intelligence lab building an open-access decentralized machine learning network that allows for the deployment of smart applications on the AI-based blockchain network. With the rise of DeFi and GameFi applications, there is a new rush for building scalable blockchain solutions that enable the development of advanced decentralized applications. As per academic , Machine learning (ML) algorithms offer incredible learning potential, which can unleash the potential of DeFi by the creation of intelligent DeFi lending and intelligent Automated Market Maker that can cause reduce market inefficiency such as price slippage and protocol exploitation through flash loans in DeFi. MEXC Global Bybit Fetch.ai research allowing These features can make the blockchain smarter than the 2nd Generation and the 3rd Generation blockchains by enhancing the security of the distributed ledger by reducing downtimes in settlement and reconciliation of transactions and data flows. Additionally, the computational power of ML can be leveraged to reduce the time it takes to determine the golden nonce, as well as to improve data exchange pathways. Furthermore, blockchain technology's decentralized data architecture aspect allows us to create better machine learning models. Such applications can be used to fight covid-19 by . blockchain and AI for covid-19 modelling, managing immunity testing results through blockchain and privacy-preserving and gathering of personal data for collective analysis for medical applications. applying Consider any smart blockchain-based application in which data is collected from various sources like sensors, smart devices, and IoT devices such as ArcTouch, Fetch.ai and NetObjex. The blockchain under this application functions as an integral part of the application. Storing data on a blockchain network reduces ML model mistakes because the data in the network does not include missing values, duplicates, or noise, which is a key prerequisite for a machine learning model to achieve greater accuracy. This reduces error margins when collecting medical data from IoT devices when treating patients in hospitals. ML-based blockchain enables the development of advanced decentralized applications, Layer-1 solutions and programming languages such as the WASM-based smart contract language (Cosmwasm) on the Fetch.ai blockchain, allow for complex cryptography and machine learning logic be deployed on and off-chain, making it an interchain protocol. Layer-1 blockchains like Fetch.ai can operate as layer-2 networks for legacy blockchains and interchain bridges to the outside world. Fetch.ai's toolkits allow developers working in the cosmic ecosystem or Ethereum to develop interchain applications. The interchain applications can create a billion-dollar connected DeFi economy that can unleash new possibilities for blockchain protocols. Leveraging Machine Learning in Blockchain-Based Applications Using machine learning models in blockchain technology may have , including authenticating any authorised user when attempting to modify the blockchain. Developers can scale blockchain technology to give a high level of security and trust via the use of ML. To guarantee the terms and conditions that were previously agreed upon are maintained, ML models may be included in the application. Such as building a decentralized application that focuses on strengthening data security through the use of ML and blockchain for construction, manufacturing, energy and transportation companies. several advantages The machine learning model can be adjusted to reflect the current state of the blockchain's network. Models may aid in the extraction of useful information from the user. For example, building personalized decentralized applications that link to IoT devices that can process agreements faster through smart contracts. We may then reward the user based on this continual computation. By using blockchain's traceability, one can also assess the hardware of various machines to prevent machine learning models from departing from the learning path to which they are allocated. With the ML models built into the blockchain, businesses all across the globe can speed up their data trade. Where the ML models are responsible for managing the data's trading routes, alternatively, they may be used for other purposes such as data validation and encryption. Due to this, machine learning models can be applied to DeFi and other blockchain-based use cases such as contract tracing to scale and reduce black swan events by making IoT devices smarter and privacy-centric by enabling decentralized and more robust applications. Catch all the breaking news, and Don’t forget to like the story! and . Image credits: Brian McGowan Maximalfocus The content of this story DO NOT represent the views of HackerNoon and are meant as information only from the lens of the independent contributor. Please DYOR before investing.

MEXC Global and Bybit Launch a $150 Million Fund to Support AI-based Applications on Fetch.ai 

I am writing this post to show with jest-fetch-mock. let's suppose that you are using t and you are comfortable with how to mock and test fetch Jes “async/await”. In this post, we are going to test an application that is going to request information from: https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/ To make it possible, we have to mock our fetch. Add necessary packages Before starting, we have to in our application throw this command: install jest npm add --dev jest. Then, we have to add jest in our like this: package.json : { : ,
  }, "scripts" "test" "jest" Now we will be able to test our functions and class throw this command: npm test. Next, we have to add a module in our application to mock our fetch. jest-fetch-mock So, type this command: npm add --dev jest-fetch-mock. Then, in our add: package.json : { : , : [ ]
  }, "jest" "automock" false "setupFiles" "./setupJest.js" Finally, create a file with this code then put it in the of your project. setupJest.js global.fetch = require('jest-fetch-mock'); root Now, we will be able to test our code without making requests to that the API every time we run tests. Our API function looks like this: Api = { key = ; urlRequest = ; getScores = ( {
    fetch(urlRequest)
      .then( response.json()
        .then( {
          resolve(json.result);
        })).catch( {
        reject(e);
      });
  }); setScores = fetch(urlRequest, { : , : { : }, : .stringify(data),
  }).then( result.json()); { getScores, setScores };
})(); Api; const ( ) => ( const 'FBPkKVVQVi1i5V71obYP' const `https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/ /scores` ${key} const => () new Promise ( ) => resolve, reject => response ( ) => json ( ) => e const ( ) => data method 'POST' headers 'Content-Type' 'application/json' body JSON => result return export default Writing the Tests: let's put our API test file in a folder named test. 1. The first thing that we have to do is, to reset the fetch mock so, the previous tests don't interfere with the current test by adding this code in our test file: Api ;

beforeEach( {
  fetch.resetMocks();
}); import from '../controller/api' => () 2. Now, lets test our method throw this code: GET it( , () => {
  fetch.mockResponseOnce( .stringify({ : [
      { : , : ,
      }],
  })); res = Api.getScores();
  expect(res).toEqual([{ : , : }]);
  expect(fetch.mock.calls.length).toEqual( );
}); 'Return score' async JSON result user 'John Doe' score 42 const await score 42 user 'John Doe' 1 In this test, we expect that our test will return an array with this value: { score: 42, user: 'John Doe' }. Now, let's test our method with this code: POST test( , () => {
  fetch.mockResponseOnce( .stringify([{ : }])); onResponse = jest.fn(); onError = jest.fn(); Api.setScores()
    .then(onResponse)
    .catch(onError)
    .finally( {
      expect(onResponse).toHaveBeenCalled();
      expect(onError).not.toHaveBeenCalled();

      expect(onResponse.mock.calls[ ][ ][ ]).toEqual({ : });
    });
}); 'Return value for POST action' JSON result 'Leaderboard score created correctly.' const const return => () 0 0 0 result 'Leaderboard score created correctly.' Here, after sending our data, we expect that our API will return: { result: 'Leaderboard score created correctly.' }. Now if you run the tests you'll see we're all green! Also published on: https://medium.com/@josiarj/how-to-mock-fetch-in-jest-f662eaec6090

A Beginners Guide to Learn Mock Fetching in jest

When building apps that rely on data from an API, two things are essential: The stale-while-revalidate caching pattern helps us to strike a balance between both. we want our data to be fresh, and we want it fast. If our cache already contains a copy of the requested information, But at the same time, This can make navigating our apps feel instantaneously while also making sure that the user sees the latest data eventually. we can immediately show the (potentially stale) data. we revalidate our cache and fetch a new version. , you can see two components which both fetch their data from the same API endpoint. Even if a new component is added, In this video Thanks to the SWR composable, the data is always in sync. it immediately has access to the cached data while fetching a fresh copy in the background. If you want to try it yourself, you can check out the demo hosted on and . Netlify take a closer look at the code on GitHub Inspiration in the React world In the last couple of weeks, I played around with Preact, and I learned a thing or two about how to do things in the React ecosystem. I discovered that because of how React Hooks work, there are a few special requirements on how to fetch data in React components. This is why since the introduction of Hooks, two quite similar data fetching libraries saw the light of day: and . What we build today is inspired by those libraries. React Query SWR SWR Data Fetching Composable with Vue 3 I kept an eye on the development of the Vue 3 Composition API since the first RFC was published, but I never got around actually using it extensively. After experimenting with it for a couple of days, I can say this: it is fantastic! Now that I have (minimal) knowledge about how things are done in React, I can even more appreciate how powerful and straightforward to use the Composition API is. So without further ado, let’s take a look at a naive implementation of a stale-while-revalidate data fetching composable for Vue 3. { reactive, readonly, toRefs } ; LRU ; { asArray } ; CACHE = LRU({ : }); DEFAULT_OPTIONS = { : ,
}; STATE = { : ( ), : ( ), : ( ), : ( ),
}; { options = {
    ...DEFAULT_OPTIONS,
    ...customOptions,
  }; parameters = asArray(parameter); cacheKey = ; cacheKeyDedupe = ; cachedResponse = CACHE.get(cacheKey); response = cachedResponse || reactive({ : , : , : , : ,
  }); (!cachedResponse) CACHE.set(cacheKey, response); load = () => { { (CACHE.get(cacheKeyDedupe)) ;

      CACHE.set(cacheKeyDedupe, , options.dedupingInterval);

      response.state = response.data ? STATE.revalidating : STATE.loading; response.data = .freeze( callback(...parameters));
      response.state = STATE.idle;
    } (error) { .error(error);
      
      CACHE.del(cacheKeyDedupe);
      
      response.error = error;
      response.state = STATE.error;
    }
  };

  response.reload = load;
  load(); toRefs(readonly(response));
} // src/composables/swr-cache.js import from 'vue' import from 'lru-cache' import from '../utils/as-array' const new max 1024 const dedupingInterval 2000 // We use `Symbol` for the state properties to prevent // consumers of this package to use raw strings. // See: https://bit.ly/2Lh2lEM export const error Symbol 'error' idle Symbol 'idle' loading Symbol 'loading' revalidating Symbol 'revalidating' export ( ) function useSwrCache parameter, callback, customOptions const // Wrap `parameter` in an array if it is not an array already. const // Naive way of creating a unique cache key. const ` ` ${ .stringify(parameters)} JSON ${callback.toString()} const ` _dedupe` ${cacheKey} const // Use the reactive object from the cache or create a new one. const data null error null reload undefined state undefined if const async try // Dedupe requests during the given interval. if return true // Wait for the result of the callback and set // the reactive `data` property. Object await catch console // Using `toRefs()` makes it possible to use // spreading in the consuming component. // Making the return value `readonly()` prevents // users from mutating global state. return One beautiful thing about this approach but also a potential gotcha is that every instance that resolves to the same cache key shares the same reactive object. So if one component triggers a reload, the data is updated everywhere. It almost works like a global Vuex store. One thing to mention is that the way how the is created is not very reliable. cacheKey Because: . JSON.stringify({ a: 'a', b: 'b' }) !== JSON.stringify({ b: 'b', a: 'a' }) Property order does matter! But as long as you only use strings as parameters, that’s no problem. Usage Now let’s take a look at how we can use our newly created composable. useSwrCache() Profile Name: {{ user.name }} LOADING ... {{ error }} REVALIDATING ... < > template < > div < > h2 </ > h2 < = > template v-if "user"  </ > template < = > template v-else-if "state === STATE.loading" </ > template < = > template v-else-if "state === STATE.error" </ > template  < = > template v-if "state === STATE.revalidating" < > small </ > small </ > template </ > div </ > template < > script { fetcher } ; { useSwrCache, STATE } ; { : ,
  setup() { { : user,
      error,
      state,
    } = useSwrCache( , fetcher); {
      STATE,
      error,
      state,
      user,
    };
  },
}; import from '../utils/fetcher' import from '../composables/swr-cache' export default name 'UserProfile' const data 'https://jsonplaceholder.typicode.com/users/1' return </ > script The utility is a simple wrapper around . returns a reactive object with the , the current and, if applicable, an . fetcher fetch() useSwrCache data state error We have two different states for (no cached data) and . loading revalidating Wrapping it up Although it works perfectly fine, this is a quite raw implementation and in no way as comprehensive as React Query or SWR. If you consider using something like this in production, you might want to use a more bulletproof approach for generating unique cache keys. Previously published at https://markus.oberlehner.net/blog/stale-while-revalidate-data-fetching-composable-with-vue-3-composition-api/

Stale-While-Revalidate Data Fetching Composable with Vue 3 Composition API

Practical Data Fetching with React Suspense That You Can Use Today

Fetching data from internet is one of the most common operations that every developers should master. In Flutter, this operation is pretty straightforward. In this post we will learn how to handle data from fetching to displaying it on our mobile apps. Setup First thing first, we need to know where we are going to fetch the data from. We will use . You can always choose another source of data, but for the purpose of this post this API key is more than enough. Also, we don't need to register anything to make an API calls to this dummy API. Dummy Rest API Example Second, we need to install the required plugins for this app through . pubspec.yaml dependencies: json_annotation: ^2.4.0 http: 0.12 .0 +4 dev_dependencies: build_runner: ^1.0.0 json_serializable: ^3.0.0 Then run flutter pub get Now we are good to go. Model Just like other OOP languages, we need to create model class for our incoming data. Let's start by creating . models.dart Since most data are JSON typed when you fetch it from the internet, we will need to handle it because JSON data are not automatically parsed. To do so we will use json_serializable plugin, which will do the dirty jobs for us. ; ; () { id; (name: ) employeeName; (name: ) employeeSalary; (name: ) employeeAge; (name: ) profileImage;

  Employees({ .id, .employeeName, .employeeSalary, .employeeAge, .profileImage}); Employees.fromJson( < , > json) => _$EmployeesFromJson(json); < , > toJson() => _$EmployeesToJson( );
} import 'package:json_annotation/json_annotation.dart' part 'model.g.dart' @JsonSerializable class Employees final String @JsonKey 'employee_name' final String @JsonKey 'employee_salary' final String @JsonKey 'employee_age' final String @JsonKey 'profile_image' final String this this this this this factory Map String dynamic Map String dynamic this There will be errors because we refer to a non-existent variable and file. In order to wipe those errors, run build runner to generate additional dart file for our model: pub run build_runner build HTTP Request In this part, we will separate the UI and logic of the apps. Let's start by creating network_helper.dart Handling requests in Flutter is easy. Take a look at the code below: http; ; ; url = ; { getPath() { url + ;
  }

  Future< <Employees>> getEmployees() { res = http. (getPath()); (res.statusCode == ) { json = jsonDecode(res.body); data = json[ ]; data.map((employees) => Employees.fromJson(employees)).toList();
    } { Exception( );
    }
  }
} import 'package:http/http.dart' as import 'dart:convert' import '../models/model.dart' const "http://dummy.restapiexample.com/" class GetEmployee String return "api/v1/employees" List async final await get if 200 var List 'data' return new else throw 'Failed to fetch data' First we import . We use this package in order to use method. This method will be responsible for parsing our json to be readable by dart. dart:convert jsonDecode() Notice that we use in the beginning of our declaration. This will tell Flutter that we want to return a object when we call . Future Future getEmployees() A is used to represent a value that will be available in some time in the future. For a more advanced explanation, read . Future here Display Our Data With ListView.builder After we receive the data we fetched from the internet, we need to update our widget so that it can display the data in our app. ; ; ; { id = ; title = ; _HomeScreenState createState() => _HomeScreenState();
} { Widget build(BuildContext context) { Scaffold(
      appBar: AppBar(
        title: Text(HomeScreen.title),
      ),
      body: Center(
        child: _employeesData()
      )
    );
  }
} import 'package:flutter/material.dart' import '../../models/model.dart' import '../../controllers/network_helper.dart' class HomeScreen extends StatefulWidget static const String "home_screen" static const String "Home" @override < > class _HomeScreenState extends State HomeScreen @override return Here, we are dealing with asynchronous data binding. When the app start, the widgets were built as immutable for performance reasons. Therefore, we need to let flutter know which widgets may change during the runtime. This is where state management takes place. In our app, we set as a stateful widget. This gives flutter information that may need to rebuild during runtime. In this case, will receive data that we fetched previously. But we need a method to handle the data we receive. Take a look at the code below: HomeScreen HomeScreen HomeScreen FutureBuilder _employeesData(){ FutureBuilder< <Employees>>(
    future: GetEmployee().getEmployees(),
    builder: (BuildContext context, AsyncSnapshot< <Employees>> snapshot){ (snapshot.hasData) { <Employees> data = snapshot.data; _employees(data);
      } (snapshot.hasError) { Text( );
      } CircularProgressIndicator();
    },
  );
} return List List if List return else if return " " ${snapshot.error} return Now, we create a widget that will be responsible to handle the asynchronous process, the . This widget will call the operation to fetch the data that we have created before, and as soon as the return value comes, it will call the function to build the widget to display our data. FutureBuilder ListView _employees(data) { ListView.builder(
    itemCount: data.length,
    itemBuilder: (context, index) { Card(
        child: _tile(data[index].employeeName, data[index].employeeSalary, Icons.work)
      );
    }
  );
}

ListTile _tile( title, subtitle, IconData icon) { ListTile(
    title: Text(title,
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: ,
        )),
    subtitle: Text(subtitle),
    leading: Icon(
      icon,
      color: Colors.blue[ ],
    ),
  );
} return return String String return 20 500 That's it! Please put a comment if you have any questions. The source of this article is available on github Thank you for reading!

Fetching Data And Displaying It On Widget In Flutter

Google Authentication and Fetching mails from scratch means without using any module which has already set up this authentication process. We’ll be using Google API python client and oauth2client which is provided by google. Sometimes, it really hard to implement this Google authentication with these libraries as there was no proper documentation available. But after completing this read, thing will be clear completely. Now Let’s create Django 2.0 project and then implement Google authentication services and then extract mails. We are doing extract mail just to show how one can ask for permission after authenticating it. Step #1: Creating Django Project The first step is to create virtual environment and then install the dependencies. So We’ll be using venv: mkdir google-login ; ; cd google-login

python3 -m venv myvenv
source myvenv activate &amp &amp .5 /bin/ This command will create one folder myvenv through which we just activated virtual environment. Now type pip freeze pip install Django== 2.0 .7 That is Django version which we used but feel free to use any other version. Now next step is to create one project, let’s name it gfglogin: django-admin startproject gfglogin . Since we are inside google-login directory that’s why we want django project to be on that present directory only so for that you need to use ‘ ‘ at the end for present directory indication. Then create one app to separate logic from main project, so create one app called gfgauth: . django-admin startapp gfgauth Since we created one app. Add that app name into settings.py in INSTALLED_APP list. Now we have Django project up running, so let’s migrate it first and then check if there is any error or not. django- startapp gfgauthpip admin freeze Previously published at https://www.geeksforgeeks.org/python-django-google-authentication-and-fetching-mails-from-scratch/

Implementing Google Authentication and Fetching Mails from Scratch Using Python Django

Let us take a look at why Binance Launchpad — notorious for its quality assessments and promotion of “truly transformative” crypto projects — has shortlisted ‘Fetch.AI’ for its next token sale. We are now journeying through the longest bear market in the history of the crypto.In past year, we saw one of the most iconic bull runs which started in Q4 of 2017 to Q1 of 2018, and almost all major currencies attained all-time highs. Once the bears started gripping the market, we witnessed the purge of all major digital assets — by as much as 80% — 90%. In 2018 alone , we had almost 2200+ ICO offered; most of them generating high interest from the community. Post-summer of 2018, the ICO market also felt the brunt of crypto meltdown, as most of them struggled to raise the needed funds to launch the project. Source: cointelegraph.com By Q4 of 2018, most of the ICO markets dried out, and a majority of the crypto pundits predicted that ICO’s time was over. Then, Binance Launchpad happened. is the exclusive token launch platform of the digital assets trading giant Binance, which was formed to help blockchain projects raise funds and provide them access to a more extensive network of supporters. Binance Launchpad Over and above that, Binance intends to help projects grow by providing mentorship and business advice. In 2017, Binance launchpad held sales of two major projects Bread (BRD) and Gifto (GTO) — both were sold out in a flash. In 2018, there were no sales conducted owing to unfavorable market conditions. In Jan 2019, Binance launchpad decided to launch BitTorrent token(BTT) which was sold out in just 16 minutes. If it was not for the software glitch, its speculated that the sales could have been ended in 1 or 2 minutes which shows the interest and trust the market shows on Launchpad backed ICO projects. Recently, Binance launchpad announced its next token sale — Fetch.AI. As per Binance’s t: announcemen “Binance Launchpad will commence the Fetch.AI (FET) token sale at 2019/02/25 2:00 PM (UTC). The token sale will accept BNB and have one session only.” Let us take a look at why Binance Launchpad, which is notorious for its quality assessments has shortlisted “ Fetch.AI” for its next token sales. So, What is Fetch.AI? “Today’s internet is built for e-commerce solutions but the new web needs to enable more autonomous solutions and this requires building the infrastructure and tools to make it deployable. Fetch.AI is building the deployment infrastructure, which brings the new AI-based autonomous machine economy to life.” — Humayun Sheikh, the CEO of Fetch.AI. Fetch.AI is an ambitious project: a combination of both blockchain and artificial intelligence. It was founded in early 2017, following a merger of two independent companies, Itzme AI and uVue. Fetch.AI aims to create a brand new economy that will be based on autonomous “agents”. These autonomous artificial intelligence “agents” will be used to perform various tasks — which can be simple as booking a hotel suite, or as complex as weather modelling or designing an effective supply chain. As the developers explained, “Fetch.Ai is a kind of world where “a collective super-intelligence actively delivers answers to you: a world where information that benefits you and information that might benefit you is delivered effortlessly.” Fetch.AI will be using a combination of proof-of-stake(PoS) with proof-of-work(PoW) to deliver consensus which they have termed as Useful Proof of Work (UPoW). New blocks are minted through a normal proof-of-stake protocol with the transaction order being determined by the work carried out in between two blocks. This work is recorded on a directed acyclic graph (DAG) that grows between the blocks. The DAG is started with the previous block and terminated by the block minted by proof-of-stake which removes the need for a coordinator. Fetch.AI architecture consists of three components: Autonomous Economic Agents (AEA) Source@Fetch.ai Whitepaper As per the White paper, is a software entity that can perform actions without external stimulus. These lightweight programs will carry out the predetermined task on behalf of the users interacting with each other to solve complex problems as well as sharing the past interaction whereby improving the process for the future. AEA (Autonomous Economic Agent) You can read more about AEA from the . official blog Open Economic Framework (OEF) Source@Fetch.ai Whitepaper As per the Whitepaper: The Open Economic Framework (OEF) provides life-support for autonomous software agents. These can be thought of as digital entities that are able to make their own decisions. They exist in a digital world that dynamically reorganises itself to present the optimal environment for agents to operate in. In Simple terms, All AEA’s will be hosted in OEF which will be acting as an evolving ecosystem allowing agents to search, discover and interact with each other. As the ecosystem starts to mature, the collective intelligence thus formed will provide unparalleled guidance allowing for fast and high-reliability transactions helping Fetch Smart ledger to become more effective. You can read more about OEF from the . official blog The Fetch Smart Ledger The Fetch ledger is a novel structure that combines elements from a directed acyclic graph (DAG). To improve scalability, Fetch will be using Sharding which will help to accommodate “ ” number of transactions while still delivering rapid and consistent confirmation times. n One more silent feature of Fetch Smart ledger is that it can be used as either permissionless or permissioned(In future) as per the need of the client which helps with industrial adaptation. You can read more about Fetch Smart Ledger from the . official blog Their 2019 Roadmap: The main-net is expected to be launched by Q4 of 2019. of Fetch.AI so far has five repositories and is reasonably active. Github Team Fetch.AI is based out of Cambridge, UK, and is lead by three co-founders. An innovative entrepreneur and a founding investor in DeepMind which was acquired by Google. Humayun Sheikh, CEO- - A veteran with thirty years of experience in software development and the producer of the successful a-life Creatures series of games . Also an early developer at DeepMind. Toby Simpson, CTO . A Professor at Sheffield and established scientist in advanced machine learning AI. Thomas Hain — CSO They are also supported by other members, who bring in a wide variety of expertise from various fields like AI, Machine learning, Blockchain Specialist, Software Development, etc. Token Metrics The token of Fetch.AL ecosystem is termed as Fetch Token( ). Currently, Fetch Token is an ERC-20 based token, but as laid out in the roadmap, the main-net is expected to be launched in Q4–2019. FET The total number of tokens generated is intended to be 1,152,997,575 and No further tokens will be created. Below given is the distribution plan of Fetch.Al Conclusion Apart from all the technological advancement, Fetch.AI will be bringing and its most significant selling point will be the factor. It’s a known fact that Binance will be listing the project sooner or later once the token Sales will be completed. Binance will surely help the project to attract more investors in the short term but long term performance of the token will be purely depending upon its performance and roadmap deliverables. Binance Launchpad As per the website, Fetch.AI already has a working MVP which is now tested internally. We have a working Fetch system internally. This internal test demonstrates the key innovations involved in Fetch: the scalable smart ledger, the open economic framework (that provides the window on the digital world to agents attached to it) and some aspects of the machine learning technologies we are using. In the summer, we will release a public test-net along with the code necessary for everyone to participate and build with Fetch. This shows that the team is progressing rapidly, and may be one of the reasons why Binance is betting on them. Another Factor is its strong team. part of the team that created Deepmind which was beating Facebook for 660 Million USD. Humayun Sheikh and Toby Simpson was acquired by Google Fetch.AI aims to merge Blockchain and AI, which will be facing fierce competition from established players like IOTA, SingularityNet, Hashgraph etc. Fetch.AI has just started its journey, whereas other projects are way ahead in their roadmap which includes main-net and test-net launch. It’ll be interesting to see how Fetch.AI will be finding its place among other projects in the coming future. Disclaimer : This article is not intended as investment advice. You should always do your own research and invest your capital wisely. I don’t own the token, neither will I be rewarded in any way for writing this article.

Stories, News & Mentions about FETCHMI

Fetchmi’s Stories on HackerNoon