swr | React Hooks for Data Fetching | Frontend Framework library

 by   vercel TypeScript Version: 2.2.4 License: MIT

kandi X-RAY | swr Summary

kandi X-RAY | swr Summary

swr is a TypeScript library typically used in User Interface, Frontend Framework, React Native, React, Axios applications. swr has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

SWR is a React Hooks library for data fetching. The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again.

            kandi-support Support

              swr has a medium active ecosystem.
              It has 26960 star(s) with 1076 fork(s). There are 200 watchers for this library.
              There were 9 major release(s) in the last 6 months.
              There are 58 open issues and 728 have been closed. On average issues are closed in 161 days. There are 19 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of swr is 2.2.4

            kandi-Quality Quality

              swr has 0 bugs and 0 code smells.

            kandi-Security Security

              swr has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              swr code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              swr is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              swr releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of swr
            Get all kandi verified functions for this library.

            swr Key Features

            No Key Features are available at this moment for swr.

            swr Examples and Code Snippets

            setup-opengl,OpenGL support details
            JavaScriptdot img1Lines of Code : 249dot img1License : Permissive (MIT)
            copy iconCopy
            meson --buildtype=release -Degl=false -Dgallium-vdpau=false -Dgallium-xvmc=false -Dgallium-omx=disabled -Dgallium-drivers=swrast,swr -Dplatforms=x11 -Dglx=gallium-xlib -Dopengl=true  -Dvulkan-drivers= -Dtexture-float=true -Dosmesa=gallium -Ddri-drive  
            use-eazy-auth,Fetching libraries integrations,SWR
            TypeScriptdot img2Lines of Code : 45dot img2License : Permissive (MIT)
            copy iconCopy
            import useSWR, { SWRConfig } from 'swr'
            import { useAuthActions } from 'use-eazy-auth'
            import { meCall, refreshTokenCall, loginCall } from './authCalls'
            function Dashboard() {
              const { data: todos } = useSWR('/api/todos')
              // ...
            function Confi  
            SSWR (Svelte Stale While Revalidate),Global configuration options,Example
            TypeScriptdot img3Lines of Code : 14dot img3License : Permissive (MIT)
            copy iconCopy
            import { createSWR } from 'sswr'
            const swr = createSWR({
              // Configure a global fetcher for all SWR hooks. This
              // can be replaced with anything that returns a promise
              // with the data inside, for example: axios.
              fetcher: (key) => fetch(ke  

            Community Discussions


            In React 18, is useEffect's function guaranteed to run AFTER a Suspense promise completes?
            Asked 2022-Apr-11 at 16:29

            I have a simple master-detail scenario where on the left side, I load a list of cities using useSwr with a REST service, then on the right side I have a city detail windows that also uses useSwr to load a single city (either from clicked on left, or first load).

            In the code below, I'm calling the useEffect function, and then using the data retrieved from useSwr in a state setting call (setSelectedCityId).

            This works, and there has always been data associated with the cities array, but I'm wondering if it is guaranteed that useEffect's function will run AFTER the Suspense promise is completed (like it seems to be).

            Here is my simple code:



            Answered 2022-Apr-11 at 16:29

            Yes, in React 18 useEffect always runs when the tree is consistent. So effects fire only after the tree is ready and not suspended.

            Source https://stackoverflow.com/questions/71789772


            SWR not serving stale data?
            Asked 2022-Mar-19 at 00:55

            I was under the impression SWR should return the stale data on page load before updating the view with the new info from the API.

            I have made a basic Nextjs app with simple API timeout and it's "loading" - for the 5 second timeout I have added to the API - every time. I was under the impression it should serve the previously cached version before updating once the API call returns?

            Vercel URL - https://swr-test-mkhx72bz3-webknit.vercel.app/

            repo - https://github.com/webknit/swr-test




            Answered 2022-Mar-19 at 00:55

            I'm no expert but by "every time" do you mean every time you reload the webpage? SWR wont cache the value between refreshes of the webpage for you.

            Cache in this context means that two components using the same swr key ('/api/hello') will result in just one call to the api. So which ever component calls the swr first will get the api response, and the second component will get the same value from the cache.

            But swr can still call the api multiple times later on to "revalidate" and send the updated response to both (or all) components that use that key.

            Source https://stackoverflow.com/questions/71509653


            Next.js's per page layout component doesn't get value from Vercel's swr global configuration
            Asked 2022-Mar-10 at 09:54

            The useSWR hook from swr works everywhere if I explicitly enter the fetcher.



            Answered 2021-Oct-22 at 18:07

            Your First.getLayout property should be a function that accepts a page and returns that page wrapped by the HeaderLayout component.

            Source https://stackoverflow.com/questions/69681236


            How to fix NextJS enoent?
            Asked 2022-Feb-05 at 09:59

            You guys know what may cause this error? Help will be highly appreciated. This error suddenly started and can't figure out why. Any source I find related to this topic also didn't help, such as npm clear cache etc.



            Answered 2022-Feb-05 at 04:11

            try revert "next" back to 12.0.9

            Source https://stackoverflow.com/questions/70992824


            Next.js dynamic routes with Firestore collection
            Asked 2022-Jan-17 at 12:09

            I'm looking for a way to have a dynamic route that displays for every document in a Firestore collection using Server-side Rendering.

            For example, a document called foo would exist at test.com/foo under the [doc] page component. Any time a document is added, it should be able to be accessed through its respective URL.

            I've tried this method but I haven't been able to get it to work. I've also tried implementing getServerSideProps but have not had much success, any pointers would be appreciated.

            Code from the method above as follows:

            under pages/api/[doc].js



            Answered 2021-Sep-04 at 18:17

            You can try using getServerSideProps:

            Source https://stackoverflow.com/questions/69057499


            How to conditionally fetch user data based on logged-in state with SWR?
            Asked 2022-Jan-13 at 18:48

            I am trying to set some UI state that is dependent on if a user is logged in. If a user is logged in, some state in the UI should reflect this.

            I am using SSG to statically generate pages and SWR to fetch the user data. When I call my fetcher function and try to call my custom hook to check if the user is logged in, on the initial request, the user is undefined, but when I reload, the user is present.

            Why is this the case? Is the fetcher function called before anything else and how can I fix this.

            Basically, all I want is to SSG the [parkCode].js pages and fetch some user data to display user specific state.

            Here is my code:



            Answered 2022-Jan-13 at 09:44

            When the page is first rendered, the user variable still has its initial state (null), as the checkUser hook useEffect hasn't run yet. This means that when useSWR('park', fetcher) is called, the user inside the fetcher method will also be null. To prevent this behaviour, you can conditionally fetch the data in the useSWR call only when the user is set.

            Source https://stackoverflow.com/questions/70689699


            Vercel deployment error: Module Not Found remotelly works locally. Cached build is the problem?
            Asked 2022-Jan-06 at 13:52

            I'm making this site using Next.JS hosted @ Vercel. One of the packages I'm using is a custom one that I've forked, updated it in my project and after the build, was able to make it work locally. I posted a question here about it.

            However, deploy is failing on Vercel's side with a message complaining that that same custom module I'm using couldn't be found. Everything works fine locally.



            Answered 2021-Dec-31 at 07:59

            There @react-headroom dependency in your package.json points to a github link rather than a dependency version. That seems to be the issue.

            Source https://stackoverflow.com/questions/69780855


            How to use SWR with generic T?
            Asked 2021-Dec-30 at 16:19

            I have wrapped the SWR into a custom hook:



            Answered 2021-Dec-30 at 16:19

            useSWR's first arg should be key.

            Source https://stackoverflow.com/questions/70533658


            Static generation and SWR in single page
            Asked 2021-Dec-29 at 01:15

            I'm building a blog website in Next.js, the API for the blog is from some headless CMS.

            In a page I want to do the following:

            1. List some blogs.
            2. Set of buttons available, based on each button click different set of blogs are loading (should replace the blogs in #1).

            Since SEO is needed I'm pretty confused to use which approach should I choose.

            What I thinking that I generate the initial list with getStaticProps (Static Generation), and after loading I want to replace the blogs based on user action (button click).

            But I'm confused, is it possible to use static generation and SWR in single page?

            Here is my implementation.




            Answered 2021-Dec-28 at 14:55

            In the FeaturedBlogs component, you can create a state variable to keep track when a new category is selected on the client-side.

            Source https://stackoverflow.com/questions/70480741


            Put the `response.data` value into the `setState[]` array
            Asked 2021-Dec-15 at 08:02

            I want to put swr data into setState[] I have code like this.



            Answered 2021-Dec-15 at 08:01

            You don’t need to do this. The data is already part of the component’s state, and SWR is managing it for you. You don’t need to transfer the data into another state variable.

            Use data anywhere you were expecting to use contents, and it will work as you expected. You can choose a different name for the variable if you like:

            Source https://stackoverflow.com/questions/70359807

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install swr

            In this example, the React Hook useSWR accepts a key and a fetcher function. The key is a unique identifier of the request, normally the URL of the API. And the fetcher accepts key as its parameter and returns the data asynchronously. useSWR also returns 2 values: data and error. When the request (fetcher) is not yet finished, data will be undefined. And when we get a response, it sets data and error based on the result of fetcher and rerenders the component. Note that fetcher can be any asynchronous function, you can use your favourite data-fetching library to handle that part.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i swr

          • CLONE
          • HTTPS


          • CLI

            gh repo clone vercel/swr

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link