376 questions
0
votes
2
answers
25
views
How to properly type Axios with response interceptor + useSWR Fetcher in TypeScript?
I'm building a Next.js app with useSWR, axios, and TypeScript.
I have an Axios instance with a response interceptor that returns response.data:
// api.ts
import axios from "axios";
export ...
0
votes
0
answers
24
views
Safely attaching token to GET request to remote API from client
My stack involves a frontend built in Nextjs and an external REST API backend built in another language. For certain requests to the API, authentication is required, and this is currently implemented ...
- 123
0
votes
0
answers
21
views
Problem adding html attribute in SWR Mode
In my nuxt application I set the route '/' to swr. But I need to add a class to the html element according to the 'app-theme' cookies. But I can't do this because it's in SWR mode. Is there any way to ...
0
votes
1
answer
73
views
Trouble with useSWR revalidation and React MSAL token refresh
I'm working on an internal facing React web app that uses React-MSAL for authentication and useSWR for all of our GET requests. I've been working on the authentication flow on and off for a few months,...
- 11
2
votes
0
answers
190
views
"Uncaught Exception: Error: Connection terminated unexpectedly" with Next and Vercel Supabase Postgres
I'm currently working in a project that uses Next 15, React 18.3.1 and Vercel's Postgres database (supabase). All the connection to the database is done in Next's api. The connection to the database ...
- 55
1
vote
1
answer
307
views
Material UI: DataGrid server-side pagination flickering data when using swr
I want to display server-side paginated data on a Material UI DataGrid with data fetched using swr. I've been working through MUI's introduction example for server side data in DataGrid which is using ...
- 11
0
votes
0
answers
44
views
fecth API cannot load due to access control checks when downloading a json file
I have a Nextjs 14 application and the requests are made on the same origin. I experience some odd behavior when downloading json files in safari(IOS). I am using swr and it re-fetches automatically ...
- 183
1
vote
0
answers
62
views
Folder structure in Next.js project, having reusable SWR hooks
I am trying to add SWR to my Next.js project but having trouble figuring out where to put my reusable SWR hooks.
For example, I have this useUser hook I call in multiple components:
export default ...
- 163
0
votes
0
answers
82
views
No overload matches this call error while using useSWR with an array key or an object key
I am using Next.JS (v14.2.15) and useSWR (v2.2.5) to build a frontend solution. I don't use any server part and would like to deploy it as static pages.
I found that if I use an array or an object as ...
- 358
0
votes
0
answers
91
views
Avoid a re-render using SWR when data returned doesn't change even if the key changes?
On my Next.js I am fetching data from and endpoint using SWR. I am then displaying these records in a table which has some filters I can send as query params to the endpoint.
I am fetching a list of ...
- 135
0
votes
1
answer
44
views
Multiple Data Fetching with useSWR in React Hook Leading to Undefined Data
I'm developing a React component ClinicalViewsSummary that retrieves patient encounter data using the useSWR hook. The child component EncounterValuesTile fetches data with various params it has but ...
- 165
2
votes
1
answer
163
views
Why a memory leak occurs when I get the data stored in indexedDB inside the useSWR fetcher
I got the data stored in indexedDB inside the fetcher of useSWR.
Then, the memory usage increased every time auto refresh occurred.
When I got the data stored in indexedDB only once from outside of ...
- 33
0
votes
1
answer
143
views
How to show Loading when the key changes in useSWR even if the data for the key already exist in cache?
I am using useSWR hook for data fetching. I want to show Loading, whenever the key changes. I have included the filter state in the key of useSWR, so whenever the state updates, it will call the API.
...
- 665
0
votes
1
answer
92
views
How distinguish between initialData and fetched data?
I have the following query:
export const useCurrentUser = () => {
const enabled = !isGuestUser();
return useQuery({
queryKey: ['currentUser'],
queryFn: () => getCurrentUser(),
...
- 307
1
vote
0
answers
102
views
How to wrap useSWRMutation and use return data
I'm trying to wrap useSWRMutation and its result in my own hook.
Unfortunately I'm doing something wrong since the data error and isMutating are not getting populated.
This is my current code:
export ...
- 78
0
votes
0
answers
12
views
Upgraded useSWR from v1 to v2, data not returning when there's config/param
This is working fine when no config was included
const { data } = useSWR('/api/');
but once I added params, the data wont load
const config = {
params: {
param1: 'param1'
}
}
const { data } =...
- 31
3
votes
1
answer
469
views
Next.js SWR-like behavior with Streaming SSR & PPR
I am building a data-intensive app at my company. There are multiple pages, including
/experiment - lists all experiments, data updated couple times an hour
/experiment/[id] - metadata on the ...
- 135
4
votes
1
answer
2k
views
can I use server actions as SWR fetcher?
I wanted to know if this method is optimal or not. Because I did not find any documentation about it.
example
a server action to get the current user information
actions/whoami.ts
"use server&...
- 753
0
votes
3
answers
278
views
SWR shows data undefined at first render
I am trying to get used to Next.js' version. Before I was using getServerSideProps and sending the data to client side so I was getting the data at first render without seeing undefined. I didn't ...
- 259
0
votes
0
answers
27
views
JWT verify value did not come out in NEXT JS client side but available in server side
Hello i tried to fetch some data from my API and i can confirm that there is no issue in the API and can see the value of data in my terminal in my VS code ( which i know it is in server side of next ...
- 93
1
vote
3
answers
1k
views
Attempted import error: 'SWRConfig' is not exported from 'swr' (imported as 'SWRConfig')
./node_modules/@clerk/shared/dist/react/index.mjs
Attempted import error: 'SWRConfig' is not exported from 'swr' (imported as 'SWRConfig').
I wanted to using clerk for authorization and when I ...
- 41
0
votes
0
answers
485
views
Debounce with useSWR
I am using useSWR.
Sometimes the application fetches data twice, even though none of the fetchOptions have changed.
My code:
export function ApiProvider({
method = "GET",
path, // string
...
- 1
1
vote
1
answer
576
views
SWR Mutation in my react app is getting an error 'Can’t trigger the mutation: missing key.'
I am trying to set up a POST and PUT use SWR mutation hook but I keep getting the error: Mutation error: Error: Can’t trigger the mutation: missing key.
Whatever I do, I cannot seem to solve the issue?...
- 23
0
votes
0
answers
42
views
Unable to use a context within async fetcher function for useSWR
I use SWR 2.2.5 within Next.js 14.2 to load data from my node.js server. I need to send a header with access token for authorization to get the data back. The token comes from an AuthContext with ...
- 817
2
votes
0
answers
182
views
SWR Renders Old Data When User Account Is Changed from Cache and Later Displays the Actual Data After Fetch
My SWR code is functioning correctly; however, after logging in with one account, fetching an API, and then logging out and switching to another account, the previous data initially renders. ...
- 243
0
votes
0
answers
34
views
mutate() swr cause "RangeError: Maximum call stack size exceeded"
I have a button that send request POST to API then I call mutate() when request done. but its cause error. first, I think it happen because my data is too large, but when I reduce it, error still ...
- 23
0
votes
1
answer
92
views
Partial Component Rendering on State Update in MobX or SWR Mutation
Problem: When updating the state in MobX or calling a mutation in SWR, all components are being re-rendered, although I want to update only one element.
Example code:
In the React sandbox, rendering ...
- 33
0
votes
0
answers
10
views
Is my form submission being prevented by SWR? [duplicate]
I am using nextjs and incorporating SWR for some client side data rendering for an edit page. I can get the data through the fetcher but for some reason my values wont update or setState unless I ...
- 175
0
votes
1
answer
555
views
Syncing state between two or more browser tabs
Logic in my app is that I update something in settings page and after it is successfully updated I mutate user data which is used in further requests (like creating order with users chosen currency ...
- 638
0
votes
2
answers
649
views
Error response is returned in SWR's data object instead of SWR's error object
I have this axios request to my backend:
export const getData = async (
url,
requestBody = null
) => {
try {
const response =
newSalesParameters &&
(await axios({
...
- 61
0
votes
2
answers
167
views
useSWR has infinite service call
I have a api that only uses POST, so i have to sent an ID to fetch, in this case event.
The problem is that my SWR is making infinite calls.
I have this component:
const EventDetail = ({ params }: { ...
3
votes
1
answer
1k
views
Next suspense with swr, "Fallback data is required when using suspense in SSR."
I'm trying to use React Suspense within a Next project
I'm not using SSR, the app is only used as client rendering
Supense works, but I got this error :
Fallback data is required when using suspense ...
- 4,185
0
votes
1
answer
37
views
useSWR, component's state is not updating to the resolved promise of fetcher
Here is my code
// service
import axios from 'axios';
export const fetchNewsDetailsById = (newsID) => {
console.log('args in fetch news ', newsID)
const pr = axios.get('https://swapi.dev/...
- 863
0
votes
1
answer
239
views
How can I combine axios ( request -> POST (with send data) and GET ), swr and header config in the code below?
in windows 10 , i'm using react-router-dom 5.2.0 and react-redux 7.2.5 and react 17.0.2 and axios 0.21.4 and WebStorm 2023.1.3 IDE and PyCharm Community Edition 2023.2 and djangorestframework==3.14.0 ...
0
votes
0
answers
639
views
Problem with debouncing mechanism with nextjs 14
I'm working with the fake api jsonplaceholder. I'm listing posts and trying to filter them by userID changing the endpoint. To avoid hitting the api many times, I wanted to make a debounce mechanism.
...
- 1
0
votes
1
answer
211
views
SWR + NextJS - Nested Objects & Arrays
I am attempting to pull API Data from a Server using SWR & NextJS. The API Data Contains an Array, that array contains objects which contains another array. I am able to output the data from the ...
1
vote
1
answer
69
views
React - SWR - no update component
I know i'm going to feel very stupid but here goes. I have been learning React for a couple of weeks now (coming from all native javascript client side) and I have been fetching data using useEffect. ...
- 89
0
votes
1
answer
1k
views
Calling useSWR on the same API route in a second function where I update the data
I have a Next.js 14 app where I am listing data from my DB on a page with useSWR. The data is updated via a server action called by submission of a form on a modal that is opened with the Next.js 14 ...
- 1
1
vote
0
answers
259
views
How do I fetch data using the useSWR hook for a list of roleIds that keeps on getting updated by a useState and how to use the data fetched
I have a list of roleIds that is updated when ever a user selects a role from my select field
The select field accepts selecting multiple options and removing a selected option hence adding and ...
- 11
1
vote
0
answers
267
views
Facing 401 Unauthorized Error During Login in Laravel and Next.js App using NextAuth and SWR
I'm working on a Laravel and Next.js application where I'm encountering a 401 Unauthorized error specifically during the login process. I've checked my code and configurations, but I'm unable to ...
- 19
0
votes
1
answer
645
views
With useSWR how can I compare data before and after revalidation?
Using Next.js and through useSWR I am pulling data from an endpoint every 30s using an automatic revalidation interval (https://swr.vercel.app/docs/revalidation#revalidate-on-interval). In the data ...
2
votes
1
answer
5k
views
right way to clear SWR cache
SWR recommends using
mutate(
key => true, // which cache keys are updated
undefined, // update cache data to `undefined`
{ revalidate: false } // do not revalidate
)
to clear cache. And I ...
- 638
1
vote
1
answer
3k
views
API route not found on NextJS 14 (App/route)
I want to use the Google Analytics API using SWR on Next.js 1, however the route returns 404.
const { data: visitors } = useSWR("/api/dash/route", fetcher);
My folders tree:
app/analytics/...
- 171
1
vote
1
answer
156
views
Differences between useEffect() and useSWRSubscription()
I am reading some data real-time from Firebase's Cloud Firestore using a query and useEffect:
import { useEffect } from 'react'
useEffect(() => {
const q = query(
collection('some ...
- 354
-1
votes
1
answer
283
views
SWR error, it's making multiple calls and data its ever undefined
Hi i'm trying to use SWR in my React app, but this generate an error because the data its ever undefined and when i check the network, i can se three calls to the api:
Table component:
import React, { ...
- 415
1
vote
0
answers
313
views
useSWRInfinite hook weird bug/error when changing query parameters
So I am trying to implement infinite scroll using useSWRInfinite hook of swr in Next.js.
import { useRouter, useSearchParams } from 'next/navigation';
import useSWRInfinite = 'swr/infinite';
const ...
- 293
1
vote
1
answer
2k
views
How to handle errors in NextJS 13 API Routes while using useSWR hook?
I'm using useSWR hook in components. Under api folder I have api. I'm using app router.
Components are imported in page.
Problem is that if API encounters some error then how should I return it to the ...
- 1,387
2
votes
0
answers
318
views
SWR: Revalidate stale resources without refetching on every mount
I use SWR with a globally configured axios fetcher like this
<SWRConfig
value={{
fetcher: getFetcher,
}}
> ...
I don't want to ...
- 5,513
0
votes
1
answer
507
views
How can I poll an ajax request in astro
Is there some way I can poll to an endpoint using astro??
I'm currently using SSR to get the data from the endpoint at page request time. But I would like to poll to that endpoint and update the astro ...
- 399
0
votes
0
answers
1k
views
How to attach state to dynamically generated NextUI Table Rows
I'm using Nextjs with NextUI. I have this JSX
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1 className="...
