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

Invalid Hook Call when calling a custom hook

I've been trying to solve a problem for 4 days and I've searched and searched a lot! I'm not sure if I'm just searching for the wrong thing or seeing it and am just completely oblivious to it. My problem is that when I call the hook from the main…
0
votes
1 answer

how to useSWR refetch when based response data

How can I refetch when based response data ? In my case const key = `/analyses/${anSeq}`; const response = useSWR(key, fetcher); if (typeof response.data?.simularityJson.analyzes === "undefined") { setTimeout(() =>…
Hyesung Oh
  • 163
  • 1
  • 9
0
votes
3 answers

how does swr or useSWR works properly in reactjs / nextjs?

In the fisrt part I ma suign fetch() and it is working fine but whe i use useSWR() it returns UNDEFINED export const getAllEvents = async()=>{ const response = await fetch('https://*******-rtdb.firebaseio.com/events.json'); const data =…
user11881335
0
votes
1 answer

useSWR return { null, null } for valid request

I'm trying to make a request to Firebase real-time database with useSWR in my next.js project, but for some reason it always returns null for both data and error variables. import useSWR from 'swr'; const LastSales: NextPage = () => { const…
0
votes
2 answers

Make API call with useSWR when navigation params updates and store his value on custom hook with contextAPI

I want to make an API call with useSWR when navigation(route)'s params updates and store his value on a custom hook with contextAPI. I have this component UsersPage that renders a list of users, it needs to have pagination, and when I click on some…
0
votes
1 answer

Nexjs + SWR: API resolved without sending a response for /api/projects/, this may result in stalled requests

Since on first render I was not able to get the router.query I am passing the params from getServerSideProps as follows: export async function getServerSideProps(context) { return { props: { params: context.params }, }; } Then in…
Harsha M V
  • 54,075
  • 125
  • 354
  • 529
0
votes
1 answer

nextjs: Error in mobile devices while fetching data on client side using swr

I am trying to implement client side data fetching using swr in nextjs. I am able to display the data fetched using the useSWR hook fine in my desktop browser. I then serve the app on localhost from my desktop and try and test it on my mobile…
dEBA M
  • 457
  • 5
  • 19
0
votes
1 answer

my api needs time to process a request, how can I use React + SWR to continue checking on the status?

I have an endpoint in my API that initiates a process on AWS. This process takes time. It can last several seconds or minutes depending on the size of the request. As of right now, I'm rebuilding my app to use swr. However, before this new update…
kevin
  • 2,707
  • 4
  • 26
  • 58
0
votes
1 answer

How to pass data from child to parent and render content based on selected value in dropdown?

I am learning React as I am fetching data from Pokéapi to make a list component, card component, detail component and filter component. I am trying to make a filter so you can filter by pokémon type. Only the cards that also contain that type string…
hawe
  • 15
  • 5
0
votes
0 answers

Props not being passed from Parent to Child element

I have a question regarding data passing between parent/child element. The parent element StylePage retrieves data via SWR which retrieves the data without problem and the application is able to display it with a Text. Problem is that it isn't being…
DLO
  • 914
  • 1
  • 13
  • 30
0
votes
2 answers

How to pass two parameters to an API 'Get' Request in Javascript/NodeJS

I have a React component that has to do a find({}) query with two parameters to a MongoDB database. const likes = await Likes.find({ postId: postId, userId: userId }).exec() As Mongo code only works on the server I have to make an API call (I'm…
Ray Purchase
  • 681
  • 1
  • 11
  • 37
0
votes
1 answer

How to trigger setState on a mocked hook

I have a component that uses a hook that fetches data from the server, and I have mocked that hook to return my testing data. Now if the mutate function (returned by the hook) is called, the normal implementation fetches the data again and causes a…
Elias
  • 3,592
  • 2
  • 19
  • 42
0
votes
1 answer

useInfiniteSWR with axios and typescript

We have a very good example on how to use useSWR hooks for axios and typescript on the official repo here https://github.com/vercel/swr/blob/master/examples/axios-typescript/libs/useRequest.ts import useSWR, { SWRConfiguration, SWRResponse } from…
Bryan Lumbantobing
  • 604
  • 1
  • 7
  • 22
0
votes
0 answers

SWR Data passed as prop to child component creates infinite fetch loop

In SWR, once I receive a fetch result, I want to pass it to a child component as a prop. Hook defined as: const fetcher = url => axios.get(url).then(res => res.data); export default function useTeleworkInfoSWR() { const { data, error } =…
gene b.
  • 10,512
  • 21
  • 115
  • 227
0
votes
1 answer

Swr's cache updates but UI doesn't for no reason - swr hook Next.js ( with typescript )

I'm doing a facebook clone, and everytime i press like's button, i want to see the change immediately, that's something that swr provides, but, it only updates after 4-8 seconds :/ What i tried to do is the following: when i click like's button, i…
Diego
  • 421
  • 3
  • 9
  • 34