Paginated query results not updating unless leaving browser window first

[steven-js]

Hi,

I'm using the code below and it is displaying the first 10 results correctly.

When updating the skip variable in the query, nothing happens unless the user leaves the browser window – for example, goes to another application – then comes back to the browser and then the results update.

Am I missing a step in the code below?

import React, { useState } from 'react'
import { useQuery } from 'react-query'
import gql from 'graphql-tag'
import { GraphQLClient } from 'graphql-request'

export const useGQLQuery = (key, query, variables) => {
  const endpoint = `https://graphql.datocms.com/`

  const client = new GraphQLClient(endpoint, {
    headers: {
      authorization: `Bearer MY_TOKEN_HERE`,
    }
  });

  return useQuery(key, () => client.request(query, variables));  // useQuery from react-query
};


const GET_ALL_NEWS_CONTENT = gql`
    query GetAllNewsContent ($first: IntType = 10, $skip: IntType = 0) {
      allNews(first: $first, skip: $skip, orderBy: _createdAt_DESC) {
        id
        title
        slug
      }
    }
`;

export default function AllNews() {
  const first = 5
  let [skip, skipNews] = useState(0)
  // Fetch data from custom hook that uses React-Query
  const { data, isLoading, error } = useGQLQuery(
    'allNews',
    GET_ALL_NEWS_CONTENT,
    { skip, first }
  );

  // console.log(data)

  if (isLoading) return <div>Loading…</div>
  if (error) return <div>Something went wrong…</div>

  return (
    <>
      <div className="generic-page">
        <button onClick={() => skipNews(0)}>page 1</button>
        <button onClick={() => skipNews(5)}>page 2</button>
        <button onClick={() => skipNews(10)}>page 3</button>
        <button onClick={() => skipNews(15)}>page 4</button>

        <h2>All News</h2>
        <div>
          {data.allNews.map(news => (
            <div key={news.title}>{news.title}</div>
          ))}
        </div>
      </div>
    </>
  )
};

Thank you!

example.mov

[TkDodo]

you need to make skip part of the queryKey. the key is like a dependency array to the query. it's what makes the query decide when it needs to run a request - it's not just requesting on every re-render - only when the key changes (or when you mount a new subscriber, focus the window or reconnect)

actually, all variables should be part of the queryKey.

[steven-js]

Thank you! I've updated this line and now working:

['allNews', skip],

Is there a way to pre-cache so that 'Loading…' doesn't appear on every first click?

[TkDodo]

yes, you can do keepPreviousData: true. It's meant for pagination, like you are doing it. have a look at:

• https://react-query.tanstack.com/guides/paginated-queries
• https://react-query.tanstack.com/examples/pagination

[steven-js]

Perfect :)

I made the change here:

  return useQuery(
    key, () => client.request(query, variables),
    { keepPreviousData: true }
  );  // useQuery from react-query
};