Are SWRResponse<any, any> objects missing SWR size and setSize properties?

I recently started experimenting with Vercel's SWR, and I must say it seems like the most suitable library for data fetching in Next.js. However, I've encountered some challenges while trying to integrate it with TypeScript.

Referring to the instructions in the documentation on pagination using SWRInfinite, I attempted to implement an infinite loader as shown below:

const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
  getKey, fetcher?, options?
)

Unfortunately, I received error messages stating:

Property 'size' does not exist on type 'SWRResponse<any, any>'.ts(2339)
Property 'setSize' does not exist on type 'SWRResponse<any, any>'.ts(2339)

All the parameters appear to be in place except for the last two. What could I be overlooking here? Interestingly, everything works perfectly fine when TypeScript is not being used. I have ensured that both Next.js and SWR are updated to their latest versions. Despite my efforts to follow the provided guidelines and include the getKey function, the issue persists.

Any helpful suggestions?

javascripttypescriptnext.jsswr

Answer №1

If TypeScript is recognizing the return type as SWRResponse, it likely means you are importing the default export (useSWR hook) from the swr library instead of the useSWRInfinite hook.

import useSWR from 'swr'

Ensure that you import useSWRInfinite using its named export:

import { useSWRInfinite } from 'swr'

Starting from version 1.x, the way to import useSWRInfinite has changed slightly. You should now do it like this:

import useSWRInfinite from 'swr/infinite'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What initiates the navigation to the path "/api/auth/signout" in NextAuth?

In NextJS/NextAuth, after a user signs out, they are occasionally directed to a random page like shown below at localhost:3000/api/auth/signout. This behavior is inconsistent and does not occur every time. https://i.sstatic.net/u0qfR.png When the user tr ...

reactjsauthenticationreact-hooksnext.jsnext-auth

Experiencing difficulties when trying to upload images using multer in an Express application with Node.js

I have been using multer to successfully upload images into a folder within my project. Despite not encountering any errors while using multer, I am facing an issue where the upload is not functioning as expected in my project, although it works perfectly ...

javascriptnode.jsexpressfile-uploadmulter

Embed the Nest API into your HTML5 code

My mobile HTML5 application includes a script in the index.html file. Nest.js (code below) Whenever I run my application, I encounter an error stating that Firebase is not defined. This is odd because the function seems simple: --> var dataRef = new ...

javascriptnode.jshtmlfirebasenest-api

Prevent the execution of Javascript in textarea fields

In my web application, I have a textarea where users can input any text that is saved as a string in the database. The issue arises when users enter Javascript code into the textarea, as it will execute when viewed on the saved data page. Is there a univ ...

javajavascript

There seems to be an issue with the syntax in ReactJS: the URL is

I'm facing an issue in my React code. I have a function that doesn't seem to be in the correct format for React. check(img) { console.log(img,typeof img) const url=""; const arrN = ["15","16","35","36","37","38","39","40" ...

javascriptreactjsreact-router

What is the best way to retrieve instance variables in a TypeScript file?

I'm currently working on developing an app in Rails using TypeScript. I've hit a roadblock trying to figure out how to access my instance variables in TypeScript. ...

ruby-on-railstypescript

Generating a JSON outcome from a SQL server database

My SQL server has the following table layout: Table ( id int, title varchar(40), start Date(), end Date(), allDay bool, username varchar(40) ); I found some code on this blog to create a JSO ...

c#javascriptsqljsonrazor

What is the best method for generating type declarations efficiently?

What is the most effective method for generating type declarations in a Typescript project (library) while also transpiling and bundling code efficiently? I am currently utilizing webpack, ts-loader, and fork-ts-checker-webpack-plugin. During a single bu ...

node.jstypescriptwebpackts-loader

The infinite scroll feature is not functioning properly with the combination of get static props and GraphQL

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 ...

next.jsswr

Exploring the NextPage type in Next.js

Could someone provide an explanation of the NextPage type within a Next.js TypeScript project? Most sources mention that it is used for type assignment in Next.js, but I am curious about its practical purpose. When and why should we utilize this type? Wha ...

typescriptnext.js

Instead of broadcasting your message to the channel, try sending it directly to the user

While attempting to send this embed to a user's DMs instead of a channel, I have encountered numerous outdated and irrelevant posts that do not address my specific question. module.exports = { name: 'help', description: 'this is a ...

javascriptnode.jsdiscorddiscord.js

Using JavaScript to extract data from a PHP script

I'm facing an issue where I'm uncertain about the correct code needed to start extracting data from the PHP script previously parsed in another function. Below is the code snippet: function getExhibitions() { myExhibitionsView = document.get ...

javascriptphpjsonfor-loop

Connect Angular ngx-datatable accountid to a specific details page

My datatable is displaying static data with account numbers and other details, including a column for actions such as viewing a row. When I click on the button, an alert shows me the specific details. userdetails.component.ts rows: any = [ { id: 0 ...

javascriptangular

Switching JavaScript object with numerical keys into an array

Upon receiving a JSON response from the server, it looks like this: { "0": "1", "1": "2", "2": "3", "3": "4" } I aim to transform it into a JavaScript array as shown be ...

javascriptjqueryarraysjsonjavascript-objects

Ways to determine if web pages are still not fully loaded after 12 seconds using JavaScript

Looking to optimize my code, I am only interested in targeting devices that have a slower page loading time, perhaps those taking more than 12 seconds to fully load. ...

javascriptperformancehttp-redirectpagespeeddevice

Accessing Properties in React.js: A Guide

<Element id="1" onClick={this.runFunction(???)}/> When the onClick event is triggered, I want to execute a different function with the key value "1" as an argument. How can I make this happen? Thank you. ...

javascriptreactjs

Is there a way to load an image onto the ngx-image-cropper without triggering the imageChangedEvent event?

My latest project involved creating a custom cropper using ngx-image-cropper, which allows for cropping and rotating images. For the sprint demo, I needed the images to be displayed as soon as the application loads without having to trigger the fileChangeE ...

javascriptjqueryajaxangulartypescript

Ionic - Deleting an item from local storage

Currently, I am implementing local storage for my Ionic application. While I can successfully add and retrieve data from local storage, I encounter an issue when trying to delete a specific object - it ends up removing everything in the database. Moreover, ...

typescriptionic-framework

Locate every instance of items in an array within a string

My files have a structure similar to this: https://i.stack.imgur.com/KyaVY.png When a user conducts a search, they send an array to the backend. This array always includes at least one element. For example, if they send ['javascript'] to the b ...

javascriptmongodbmongoose

React Router consistently displaying IndexRoute

This is the main file for my app: import React from 'react'; import { render } from 'react-dom'; import { browserHistory, Router, Route, IndexRoute } from 'react-router'; // Components import Main from './components/cor ...

javascriptreactjsexpressecmascript-6react-router