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
6
votes
1 answer

SWR, creating a wrapper around the useSWR hook to show loading state

I am using SWR in a React.js application and I find myself needing to display the loading status of a request. I created a helper function that extracts the loading status from an SWRResponse similar to what SWR provides in their documentation…
Xander
  • 161
  • 7
6
votes
2 answers

Make Unit Test Wait for Data filled by Asynchronous Fetch

I have a unit test which includes rendering a component that uses useSWR to fetch data. But the data is not ready before the expect() is being called so the test fails. test("StyleOptionDetails contains correct style option number", () => { …
DLO
  • 914
  • 1
  • 13
  • 30
6
votes
1 answer

Type-safe data fetching hooks with SWR and the fetch api?

I'm trying to figure out if there's a way to abstract the data fetching hooks I've created, with Typescripts generics, for my React app. Unfortunately my understanding of Typescript isn't as good as I'd hope so I'm in a pickle. The hooks I'm using…
P4nd4b0b3r1n0
  • 1,951
  • 3
  • 22
  • 31
6
votes
1 answer

Handling errors within custom SWR hook

I've written a custom hook that uses SWR to retrieve data from my API whilst setting the 'Authentication' header for the request. The hook is working fine for all successful requests but I want to be able to handle failed requests (400 status…
Mook5ter
  • 213
  • 4
  • 9
6
votes
2 answers

Cache issues: React + REST server behind CDN

I am looking for a pattern that would allow me to better the UX for my users. I have a REST server running behind CloudFront being consumed from a plain React application on the frontend. I'll simplify my example to illustrate my issue. I have an…
JasonGenX
  • 4,952
  • 27
  • 106
  • 198
6
votes
1 answer

How to make multiple calls in one page with SWR nextjs hook?

I'd like to fetch 3 endpoints for one page, I'm using the SWR hook from next.js as I need to get it from the client side. The documentation doesn't help me as I have variables for the url in an other file. I'm new to this. Here is what I have and…
Liam
  • 221
  • 1
  • 3
  • 7
5
votes
3 answers

SWR mutation does not update the cache using a static method of class as a fetcher

I'm using the swr package. I successfully fetch data using useSWR, but when I try to mutate the data - it does not work, and the cached state of swr does not change (as it should). I created my custom hook: import useSWR from 'swr'; import…
Tal Rofe
  • 457
  • 12
  • 46
5
votes
1 answer

How can I use SWR hook for all API methods? (CRUD)

I am switching certain CRUD functionality that I used to provide with a token, but now I am using SWR and I don't know how to convert it. I used this hook for GET methods but for others, I don't know what to do! export default function…
mansoureh.hedayat
  • 596
  • 5
  • 17
5
votes
2 answers

How to prevent component re-render on switching browser tabs?

In my Next.js app, the component is getting re-rendered when I change the browser tab and then get back to the tab in which the app is already opened. e.g. app is open tab 1 and when I switch to tab 2 and then come back to tab 1. Actually, I have a…
Deep Kakkar
  • 5,831
  • 4
  • 39
  • 75
5
votes
2 answers

use SWR data in useState Hook

const fetcher = (url: string) => fetch(url).then((r) => r.json()); const { data, error } = useSWR( "https://some.com/api", fetcher, ); is there any way to add data in a useState hook like this const fetcher = (url: string) =>…
Jatin Hemnani
  • 311
  • 2
  • 8
5
votes
2 answers

Calling multiple endpoints using NextJS and the SWR library

I am using the SWR library in my NextJS project and currently i am building out a dashboard. I want to hit multiple endpoints to get different data, but I can't find any reference of making multiple calls to endpoints using SWR. The syntax i am…
CodeSauce
  • 255
  • 3
  • 19
  • 39
5
votes
4 answers

Too many re-renders when setting state - useSWR

I am using useSWR to fetch data and then with the data, I want to get a total by using reduce. If I console.log the value out it works fine but as soon as I try to set the state with the value I get the 'Too may re-renders' message. import Admin…
user8463989
  • 2,275
  • 4
  • 20
  • 48
4
votes
1 answer

infinite scroll with get static props and grapql not working

I'm working on a project with pokeapi graphql and I made a infinite scroll component that loads more pokemon when you scroll the page. I wanted to have the first 48 pokemons pre loaded with static generation. So I have my index page the following…
Sku
  • 163
  • 2
  • 14
4
votes
0 answers

useSWRInfinite with pagination and mutate features

I'm using useSWR to fetch data from client side in nextjs. What I am doing and trying to achieve I am using useSWRInfinite for the pagination feature and trying to update comments like state with bound mutate function with optimisticData option…
Janghan Park
  • 41
  • 4
4
votes
1 answer

In React 18, is useEffect's function guaranteed to run AFTER a Suspense promise completes?

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…
Peter Kellner
  • 14,748
  • 25
  • 102
  • 188
1
2
3
…
24 25