Questions tagged [swr]

I have implemented a load more button in a new Next.js application, utilizing the useSWRInfinite hook. Each time the button is clicked, it triggers two calls to the backend. The first call is made with index 0 and the second one with the incremented index. ...

To explore a potential issue I encountered while using the toISOString() JavaScript function within a variable called in a useSWR API call, I set up a sample Next.js app as an example: The code for pages/user/[id].tsx, where the toISOString() function is ...

I am currently utilizing SWRConfig to implement a global fetcher, but I also have the requirement to override this fetcher in certain components. In such a scenario, would the options specified at a higher level of SWRConfig be applied? <SWRConfig ...

Encountering a challenge with retrieving data from the cache. Within my dashboard component, data fetching is successful and accessible. const Dashboard = ({ code }) => { const { data, error, mutate } = useSWR(['/api/user', ...

After reviewing the documentation and exploring how to integrate it with Next.js SSR, I find myself struggling to grasp the implementation process. None of the methods I can think of seem logical. A recent discussion on Stack Overflow suggested that initi ...

Attempting to make a delete request using the SWR library within a react hook. I understand that hooks cannot be called inside return(). How can I carry out a delete request using useSWR in my react hook project? Thank you. const page = () => { func ...

Currently, I am utilizing Next Auth for authentication and SWR for data fetching. While everything is working smoothly, there is a slight issue when the page is refreshed - Next Auth takes a couple of seconds to get the session on the client side, causin ...

My next.js app is utilizing the `useSWR` hook to fetch and populate data. const { data, error } = useSWR('/api/digest', fetcher, { revalidateOnFocus: false, }) The problem I am facing is that the DOM is not updating as expected after the `mu ...

Here is an example of an array with chat data: [ { "idChatPublic": 17, "idChatRoom": 2, "idSender": "6c25110d-4256-42e1-8205-b75ece274487", "username": "Hudson Thadeu Teixeira", "message" ...

Using the SWR hook for the first time, everything is working smoothly so far. However, I've encountered an error that I can't seem to figure out. Let me share my code with you. This is the global configuration: <AuthContext> {isValidRoute && ...

One interesting feature of Next.js is the built-in "revalidate" option: export async function getStaticProps(context) { const data = await getData(); if (!data) { return { notFound: true, }; } return { props: { data }, reval ...

I'm struggling to make SWR work in my code. Despite trying multiple examples, I can't seem to get it functioning properly. It's frustrating because the code looks fine and should work. I feel like I must be missing something simple. Current ...

In a specific scenario, I need to be able to choose users from a dropdown menu. Once a user is selected, the app should display that user's data. Upon loading the page, the app fetches the data for the first user in the array allUsers?.[0]: const [userSel ...

I've been working on a project involving pokeapi graphql, and I developed an infinite scroll component that dynamically loads more pokemon as you scroll down the page. My goal was to preload the first 48 pokemons using static generation. Here's ...

I have developed two essential functions to manage data retrieval and manipulation. The first function is responsible for retrieving all quotes, handling mutations, and indicating loading status. // Fetcher and the baseUrl export const baseURL = 'http ...

When I switch browser tabs in my Next.js app, the component gets re-rendered. For example, if the app is open on tab 1 and then I switch to tab 2 before returning to tab 1. The issue arises when I have a page displaying a list of records, and after filter ...

In an attempt to address the lack of pagination handling on the backend in this NextJS application, I proposed passing it as query parameters in the URL, like localhost:3000/patients?page=. My initial approach was close: import React, { useEffect } from & ...

I'm struggling to manage errors thrown in my SWR fetcher. Currently, whenever an error is thrown, my app stops working and I see an "Unhandled Runtime Error". What I've been doing is throwing the error inside the fetcher function. Here's th ...

I'm currently working on a project that involves a nextJS application with a Laravel backend. I've been experimenting with Laravel-NextJS for this project. So far, all login and backend functions are functioning properly. Here's some code ...

My static site is encountering an issue when trying to display a simple list of items retrieved from Supabase. Everything was working fine in React 17, but after upgrading to React 18, I am now getting sporadic errors and the fallback doesn't consiste ...

I am facing an issue with setting the UI state based on whether a user is logged in or not. The UI should display different states accordingly. I am currently using SSG for page generation and SWR for user data retrieval. However, I noticed that when call ...

As I navigate through SWR's various features, there is one that has caught my attention: SWR-subscription. The concept of "subscribing to real-time data sources with SWR" is unfamiliar to me and I am seeking an explanation along with a straightforward ...

Development Setup ・ next.js ・ typescript ・ swr This uses swr for communication purposes. I am looking to only trigger it when the query value changes. However, it is also being executed during the initial rendering. How can I prevent it ...

I have decided to upgrade my swr package from version 1 to the latest version 2. Here is a glimpse of my package.json. I am currently utilizing React 18, NextJS 12, and Webpack 5 for this project, including the ModuleFederationPlugin integration. { " ...

It seems like I'm having some trouble understanding how to properly use useSWR with React. Let me explain the issue in a simpler way: I am fetching data using useSWR and then changing the title of this object. The problem arises when navigating back to th ...

I am currently developing a small application that allows users to sign up for karaoke music. To fetch information from a mongoDB, I am using SWR, but facing performance issues. In an attempt to improve the user interface, I am trying to implement optimist ...

I'm encountering a simple issue with calling an external API: const fetcher = (...args) => fetch(...args).then(x=>x.json()) const {data:{results}, error} = useSWR("https://xxxxxxxxxxxxxxxx",fetcher) Every time I attempt to destructure th ...

I recently retrieved some data from a public API using useSWR and now I need to manipulate it. In the past, I would update the state with the API response and then simply overwrite it when performing operations. Now, I want to be able to sort the data by ...

In my Next.js application, I'm utilizing useSWR to fetch data on the client-side from an external API based on a specified language query parameter. To ensure the page loads initially, I retrieve data in a default language in getStaticProps and set it as f ...

I am currently utilizing the swr library in a Create React App and require the usage of the useSWR hook for data fetching that is both contingent and conditional. The specific task at hand involves: Making an API call to retrieve an id which will be used ...

I am working on a request using useSWR in Next.js and the API route requires the ID of the current page which is located in the query parameters at router.query.id. But how can I pass this ID to useSWR in order to fetch the correct data from my API route t ...

I am currently working on implementing pagination in a Next.js project using the useSWR hook. My approach seems to be functioning correctly, but I have a concern about caching due to the key parameter not being a unique string as recommended in the documen ...

Currently, I am utilizing the useSWR hook to retrieve data from my api endpoints. It is my understanding that it uses the api routes as the key for caching the data. The issue at hand is that I have implemented an api route on 2 separate pages (referred t ...

I am currently utilizing useSWR to fetch data and then calculating a total using the reduce method. Strangely, when I try to update the state with the calculated value, it triggers multiple re-renders causing the 'Too many re-renders' error message. impo ...

When fetching data from the backend URL without a host, in the Next Image I pass the source with the host. However, the requested URL of the image ends up being the page's pathname + the URL without the host. How does this happen? const { data: page, ...

When attempting to query the Firebase real-time database using useSWR in my next.js project, I encounter a perplexing issue where both the data and error variables always return as null. import useSWR from 'swr'; const LastSales: NextPage = () = ...