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
16
votes
2 answers

How to derive "loading" from useSWR between fetches without revalidation?

I was asked a question regarding SWRs "loading" state: How do you create a loading state from SWR between different URL fetches? Their docs make it appear straight forward: const { data, error } = useSWR(`/api/user/${id}`, fetcher) const…
Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
16
votes
3 answers

Revalidating data using mutate in SWR - Which should I use?

In my app every time the user creates a new album the post request response responds with a list of the updated list of albums. To provide a better user experience, I wanted the user to see the new content in the app without having to refresh the…
gabriel_tiso
  • 1,007
  • 3
  • 11
  • 27
15
votes
1 answer

Use Next.js Dynamic routing query object in an SWR fetch request

When using Next.js dynamic routing I'm trying to make an SWR fetch request using the routing query object, but my SWR fetch request is being called before the query object is set. Given the dynamic route /posts/[id], consider the page…
Grant
  • 811
  • 1
  • 8
  • 18
11
votes
3 answers

Prevent useSWR from fetching until mutate() is called

I have a React application which uses SWR + Axios for data fetching (https://swr.vercel.app/docs/data-fetching). The issue is that my custom hook which uses useSwr is fetching all data initially whenever the hook is initialized. My goal is to fetch…
DLO
  • 914
  • 1
  • 13
  • 30
11
votes
1 answer

How to prevent react-query from fetching initially but enables refetching?

I'm using react-query v3.13 to fetch data from API. What I want to do is to fetch API regularly from a certain point (for example, when clicking the start button), not from the time of calling useQuery. I tried the following ways. set enabled…
Ever Dev
  • 1,882
  • 2
  • 14
  • 34
11
votes
3 answers

Is it correct or good practice to use SWR together with Redux?

I'm using the SWR In my code I am using the junction of both as follows const vehiclesStates = useSelector(({ vehiclesStates: state }) => state); // REDUX const response = useFetch("/vehicles/states") // SWR const dispatch = useDispatch(); //…
Alexssander Leal Luz
  • 111
  • 1
  • 1
  • 5
11
votes
1 answer

Problem with typescript while making request to SWR

I want to know what is the type of this args that is being passed to my function below const fetcher = async (...args) => { ~_ 0 const res = await fetch(...args); …
gabriel_tiso
  • 1,007
  • 3
  • 11
  • 27
10
votes
3 answers

React SWR - how to know that updating (mutating) is running?

Im mostly using SWR to get data, however I have a situation that I need to update data. The problem is, I need an indicator that this request is ongoing, something like isLoading flag. In the docs there's a suggestion to use const isLoading = !data…
underfrankenwood
  • 431
  • 1
  • 7
  • 22
9
votes
3 answers

Use SWR to fetch multiple times to populate an array

I have a component in React in need of an array of users. I'm able to fetch one single user at a time with useUwr like so: export function Hello(id: number) { const { data } = useSWR('/api/user/{id}', fetcher) return
hello…
DLO
  • 914
  • 1
  • 13
  • 30
9
votes
1 answer

How to write test with swr

when user type some text in input search data-testid = 'loading' must be removed, now console return Unable to find an element by: [data-testid="loading"] can some one sugesstion me to writting test with swr or suggestion for me how to mock response…
Miin Miinny
  • 91
  • 1
  • 2
9
votes
1 answer

How to send headers using swr

I am trying to send headers using SWR and Axios but the headers are not being sent. const fetcher = (url) => axios .get(url, { headers: { Authorization: "Bearer " + auth.token } }) .then((res) => res.data); const { data, error } =…
Waterfall
  • 584
  • 1
  • 5
  • 15
8
votes
1 answer

How to mutate with query params in SWR hook?

currently i am using SWR to data fetching, i trying to use Mutation feature of SWR to refetch the new data but this occurred a problem when i am calling mutate() by key was added new query params. Here's my code not working: import useSWR, {…
Anna
  • 228
  • 1
  • 3
  • 13
8
votes
2 answers

socket.io vs swr for updating real-time content

I am currently building a web app with next.js, which requires real-time updates across devices, for example, if someone joins a group this needs to be instantly shown for all existing members of the group. At the moment, I'm initially fetching the…
isaacholt100
  • 388
  • 3
  • 11
7
votes
2 answers

useSWR doesn't work with async fetcher function

I am using SWR to fetch data to populate a table with. I am using the following code: const { data: items, error } = useSWR(fetchAllItems.name, fetchAllItems) The fetcher function looks like this async function fetchAllItems() { const response =…
Danagon
  • 395
  • 5
  • 15
7
votes
1 answer

use SWR with depending request data

I'm trying to use SWR to fetch list of users connected to the logged in user id provided by a custom hook. I can't put useSWR inside either useCallback or useEffect or if (loggedInAdvisor) { ... }... Can't figure out how to do it. export const…
olefrank
  • 6,452
  • 14
  • 65
  • 90
1
2 3
…
24 25