useSWRInfinite - getKey function always gets pageIndex as 1

44
October 20, 2021, at 10:30 PM

I am using the SWRInfinite example as defined here (https://github.com/vercel/swr/discussions/732) and here (https://swr.vercel.app/examples/infinite-loading).

My code is as below...

import React from 'react'
import {useSelector} from 'react-redux'
import useSWRInfinite from 'swr/infinite'
import {Button, Grid, Typography} from '@material-ui/core'
import getNearbyShops from '../../../lib/nearshop-apis.js'
import ShopThumbnail from './shop-thumbnail.js'
import Spacer from '../../../components/utils/spacer'
const PAGE_SIZE=10
export default function Nearbyshops({category, categoryName}) {
  const getKey = (pageIndex, previousPageData, category) => {
    console.log("getKey::pageIndex", pageIndex)
    // reached the end?
    if (previousPageData && !previousPageData.data) return null
    return [`/api/nearbyshops/${pageIndex+1}`, pageIndex+1, PAGE_SIZE, category]
  }

  const {data, error, size, setSize} = useSWRInfinite ( getKey, getNearbyShops)
  const shops = data ? [].concat(...data) : [];
  const isLoadingInitialData = !data && !error;
  const isLoadingMore =
          isLoadingInitialData || (size > 0 && data && typeof data[size-1] === 'undefined')
  //const isEmpty = data[0].length === 0;
  const isEmpty = data?.[0]?.length === 0;
  const isReachingEnd =
        isEmpty || (data && data[data.length-1].length < PAGE_SIZE);
  //const isRefreshing = isValidating && data && data.length===size;
  const currentShop = useSelector(state => state.main.currentShop);
  const bg = currentShop.sColor
  const fg = currentShop.pColor
  const title = categoryName?`NEAR BY ${categoryName} SHOPS`:'NEAR BY SHOPS'
  return (
    <Grid>
      <Typography variant='body2' style={{fontWeight:'bold',color:fg,marginTop:"12px",boxShadow: "0px 2px 2px rgba(0, 0, 0, 0.25)"}}>{title}</Typography>
      <Spacer space={2}/>
      {
        shops.map((shop, index) => {
          return <ShopThumbnail key={shop.id} shop={shop} showDistance={true} />
        })
      }
      <Button
          style={{backgroundColor:fg, color:bg}}
          disabled={isLoadingMore || isReachingEnd}
          onClick={() => setSize(size+1)}
          variant='contained'
          fullWidth
      >
        {
          isLoadingMore
            ? "Loading..."
            : isReachingEnd
            ? "No more shops"
            : "Show More"
        }
      </Button>
    </Grid>
  )
}

It loads the 1st page correctly. However, when I click the 'Show More' button where I do onClick={() => setSize(size+1)}, the getKey function doesn't get the next index value, and hence always gets 1.

What am I doing wrong here?

READ ALSO
How to get a value on a page using jquery and echo it onto the page using php

How to get a value on a page using jquery and echo it onto the page using php

Problem: I need to get the number 65 in strong tagI tried the following code, but it shows Uncaught ReferenceError

57
UPDATE unknown column in on clause

UPDATE unknown column in on clause

column sales_mode value : A|B -> 1|2

50
How do I have both &#39;Scoll Into View&#39; and &#39;2D/3D Transform&#39; when pressing on an element?

How do I have both 'Scoll Into View' and '2D/3D Transform' when pressing on an element?

Currently I have both scrolled into view and move & scale set on my elements and the scrolled into view overrode my move & scale transformsHow do I have both on my elements? When I remove scrolled into view, the move & scale worked perfectly...

46