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

useSWR to pass dynamic 'Cards' in to a dynamic index on slides in Swiperjs

I am currently experiencing issues when trying to pass data from my Slider (SwiperJS as parent component) in to my dynamic Card component as a child. I am using SWR to data fetch from an api endpoint (dummy data) in order to test functionality. Here…
Yan
  • 161
  • 1
  • 13
0
votes
2 answers

SWR not pulling from cache

I've got a pretty basic component that does pagination. If I move pages, I'm trying to get SWR to pull from cache, but it does another api request instead. Here is a Code.io…
Dylan
  • 1,068
  • 12
  • 25
0
votes
1 answer

How to fetch data when state changes in React using useSWR?

I have a use case where you can select users from a select menu, and when you do the app will display the data of the selected user. When the page loads I get the data of the first user in the array allUsers?.[0]: const [userSelected,…
Mathias Riis Sorensen
  • 504
  • 3
  • 13
  • 34
0
votes
2 answers

Configure SWR fetcher and axios global in react

Here is my fetcher and my application is becoming too bulky that i wouldn't want to be calling it in evvery component, how do i configure the fetcher to be accessible everywhere in my application. const fetcher = (url) =>…
Leyksnal
  • 13
  • 5
0
votes
2 answers

Swr API request return error data.map is not a function in reactjs

i am trying to consume from an API using useSWR() libary and the data to be return is an array of objects so i decided to try the axios method at first to make the request by doing below const fetcher = (url) => axios.get(url).then((resp) =>…
Leyksnal
  • 13
  • 5
0
votes
0 answers

useSWR returning undefined data without making a request to backend

I am trying to fetch user detail from backend and display profile page using swr and axios but useSWR returning undefined data and error without making request to backend can anyone tell what i'm doing wrong here? here is my code for fetching user…
0
votes
1 answer

Conditional Data fetching using SWR in react and calling axios inside array map

I have two different API end points to fetch data from. The second endpoint requires a query parameter that comes from the first endpoints response. I am using useSWR hook with axios inside a custom hook which looks like- import axios from…
Joy Ram Sen Gupta
  • 365
  • 1
  • 6
  • 16
0
votes
1 answer

useSWR returning undefined data with axios in nextjs

I have a useSubjects custom hook to fetch the data from my API endpoint that utilizes useSWR. import axios from '@/lib/axios' import useSWR from 'swr' /** * Fetcher Function for SWR */ const fetchSubjects = async url => { console.log("url = "…
Joy Ram Sen Gupta
  • 365
  • 1
  • 6
  • 16
0
votes
1 answer

Vercel SWR update data on route change

I have a list of scores that I am loading using vercel SWR. In my setup im using the same component to render scores but depending on the users route the scores should be updated. Routing: /scores /scores/soccer /scores/basketball Scores.tsx export…
Jason McFarlane
  • 2,048
  • 3
  • 18
  • 30
0
votes
1 answer

Function return type based on state of data fetching inside function (loading, loaded, error)

Sandbox link: https://codesandbox.io/s/youthful-mclean-csm60i?file=/src/useFetch.ts My types: type TUseFetchLoadingState = { loading: true; data: never; update: never; mutate: never; error: never; }; type TUseFetchLoadedState
0
votes
1 answer

Create a new fetch request on button click - SWR / React

I am building a trivia app using the OpenTBD API. I use SWR to make my API requests and get the questions and answers I want to display when my component renders API call: import useSWR from "swr"; export function useFetch(category, amount,…
0
votes
1 answer

Unable to convert example of `useSwr` hook to use `react-query`'s `useMutation` hook?

I tried changing the useSwr hook to use: import { useMutation } from 'react-query'; const { data: user, mutate: mutateUser } = useMutation('/api/user'); But I get an error stating: No mutationFn found Unable to solve this. I tried adding…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
0
votes
1 answer

There is a problem with the delete function of the react component implemented through the map method

I am developing using react. It is in the process of fetching the information contained in the db and displaying it on the web page through the map method. If you delete one piece of information using onclick or the onClose method provided by antd,…
0
votes
0 answers

Why on live Vercel site PUT & POST fetch requests result in Uncaught in promise error?

I'm running into an error and would appreciate some assistance. I created a "CRUD" project that renders data stored in a local data.json file. On localhost I am using SWR to fetch the data. User is able to update data and create new data. On…
Felipe
  • 333
  • 7
  • 19
0
votes
1 answer

not getting data when using SWR and context API in Nextjs

am trying to see the data am that am get from an API using SWR and also setting the currency in the API to what ever the user is using through context API but i can't see any data. please can someone help out. to know what am not doing right. here…
Emmanuel uzoezie
  • 433
  • 1
  • 5
  • 18