Stack Overflow
Stack Overflow

Questions tagged [swr]

SWR is a React Hooks library for remote 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 fetch request (revalidate), and finally comes with the up-to-date data again.

369 questions
4
votes
1 answer

Does swr useSWR hook have to send HTTP request for revalidation every time the data is used even though cached data exist?

While I read SWR react hook documentation and Stale-While-Revalidate methodology, It seems that swr uses cached data just for a short time placeholder to show result to users quickly. (Don't get me wrong I still think swr has many benefits) I'd like…
Shawn
  • 367
  • 4
  • 13
4
votes
1 answer

SWR - How to use getServersideProps or GetStaticProps

I want to implement GetServerSideProps with SWR, but i cant stop the clientside from fetching even though the data is loaded from the server side. Here's a simplified example We fetch a wordlist from the api with a given wordlength in the…
fotoflo
  • 821
  • 1
  • 9
  • 21
4
votes
1 answer

Child component's render still evaluated even though parent returns different component

I'm using swr in a react project and I'm trying to generify the loading/error messages in a parent component wrapping the components loading data. The wrapping component is a very simple component returning different messages depending on the…
JustinCredible
  • 165
  • 3
  • 14
4
votes
4 answers

With React 18 and suspense, how to display specific errors, not just fallback in ErrorBoundary

I have a component structured like this with my ErrorBoundary wrapping my Suspense element. function App() { return ( Could not fetch cities.}> Loading..
}>
Peter Kellner
  • 14,748
  • 25
  • 102
  • 188
4
votes
1 answer

How to use SWR with generic T?

I have wrapped the SWR into a custom hook: import useSWR from 'swr'; export enum MethodTypes { POST = 'POST', PUT = 'PUT', GET = 'GET', DELETE = 'DELETE', PATCH = 'PATCH' } type QueryBody = { method: MethodTypes; body:…
ThunD3eR
  • 3,216
  • 5
  • 50
  • 94
4
votes
1 answer

How to properly pass headers when using SWR?

I have decided to attempt to move majority of my API function to SWR as it simply allows me to do so much more! Problem However, I am having a huge issue where I cannot figure out how to properly pass headers into SWR. I've looked at the docs and…
MatDoak
  • 132
  • 5
  • 17
4
votes
1 answer

Global state management and Next.js

So, I'm planning on doing a Facebook clone to add to my portfolio, and I want to use, react-Next.js, node.js, express.js, typeORM and postgresSQL ( everything in typescript ), but i have a big issue with global state managment The Question: So, I…
Diego
  • 421
  • 3
  • 9
  • 34
4
votes
1 answer

React-Query/SWR vs Global state (e.g Redux, Zustand) when updating a single post creator's details in an infinite list of posts

In my application, I have a paginated feed containing posts retrieved from the /feed endpoint. Each feed post has... postId postTitle postBody postCreator (object) Each postCreator object has... userId userName userBio userImageUrl As suggested…
Will Despard
  • 447
  • 1
  • 4
  • 17
4
votes
1 answer

How to mutate multiple SWR keys

I'm using SWR to show a paginated component, very similar to the example in the docs. My key looks something like useSWR(`/api/items?offset=${offset}`) I would like to upload a new list of items, and I want to tell SWR to revalidate all items…
JuanCaicedo
  • 3,132
  • 2
  • 14
  • 36
4
votes
1 answer

SWR not populate data from fetcher, stuck in loading

I use graphql and swr to fetch data and this is my fetcher: FetcherHelper.js const ENDPOINT = "/api/graphql"; const headers = { 'Content-Type': 'application/json' }; export default async function FetchHelper({query}) { const options = { …
yozawiratama
  • 4,209
  • 12
  • 58
  • 106
4
votes
1 answer

swr vs axios with setInterval for large json data and high frequency in React

I am trying to build an application with large json data and sending get request every 7 seconds. So, both data size and frequency are high. Should i use swr or axios with react hooks and setinterval. I am using ag-grid and react-vis chart to…
Kumar
  • 51
  • 1
  • 3
4
votes
2 answers

What should i test in this custom hook that is wrapping useSWR?

I have created a custom hook called useCity. It is wrapping an API call made using useSWR. Here is the code for hook: import useSWR from 'swr'; import { City } from '../interfaces'; import { BASE_URL } from '../../config'; interface CitiesResponse…
Vishal
  • 6,238
  • 10
  • 82
  • 158
4
votes
0 answers

useSWR() and mutate() do not behave as expected when component is unmounted

I am having an issue with some unexpected behavior with regards to mutate(key). In my data fetching code, I have these hooks/functions: const recentOptions = { refreshInterval: 0, revalidateOnFocus: false, dedupingInterval: 180000000 …
Chris Magoun
  • 73
  • 1
  • 7
3
votes
2 answers

Attempted import error: 'swr' does not contain a default export (imported as 'useSWR'). - nextjs 13

I make project using nextjs 13.4.7 and already install swr in 3 PC but I got the same error: Attempted import error: 'swr' does not contain a default export (imported as 'useSWR'). error TypeError: (0 , swr__WEBPACK_IMPORTED_MODULE_2__.default) is…
Kusumoon
  • 31
  • 3
3
votes
0 answers

SWR MUTATION AXIOS NEXT JS - Unhandled Runtime Error AxiosError: Request failed with status code

I have a error when i use swr mutation axios like this. the response api found but show this modal error of next js. enter image description here My code fetch.ts export const loginFetch = async ( url, { arg } ) => { try { // with fetch…
vigilio
  • 29
  • 3
1 2
3
…
24 25