Can I use React infinite scroll with GraphQL and datoCMS without apollo / react-query? - pagination

Question

I'd like to pagination news, or use infinite scroll, but as the site is built then served as static files, I'm not sure the best way to go about this?
Is it possible to do without using apollo or react-query?
I did try react-query but couldn't get it to see my datoCMS endpoint.
(Update: comment below about promise)
import React from 'react'
import { useQuery } from 'react-query'
import gql from 'graphql-tag'
import { GraphQLClient, request } from 'graphql-request'
export const useGQLQuery = (key, query, variables, config = {}) => {
const endpoint = `https://graphql.datocms.com/`
const client = new GraphQLClient(endpoint, {
headers: {
authorization: `Bearer MY_TOKEN_HERE`
}
});
// use await to wait until promise has been fulfilled
const fethData = async () => await request(endpoint, client, query, variables)
return useQuery(key, fethData, config); // useQuery from react-query
};
const GET_ALL_NEWS_CONTENT = gql`
query {
allNews {
slug
id
title
}
}
`;
const AllNews = () => {
// Fetch data from custom hook that uses React-Query
const { data, isLoading, error } = useGQLQuery('allNews', GET_ALL_NEWS_CONTENT)
console.log(data)
if (isLoading) return <div>Loading…</div>
if (error) return <div>Something went wrong…</div>
return (
<>
<div className="generic-page">
<h2>All News</h2>
<div>
{data.allNews.map(news => (
<div key={news.title}>{news.title}</div>
))}
</div>
</div>
</>
)
};
export default AllNews;

Answer 1

With a little help from datoCMS and the react-query community, here is the solution! …
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),
{ keepPreviousData: true }
); // 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({ newscount }) {
const first = 5
let [skip, skipNews] = useState(0)
// Fetch data from custom hook that uses React-Query
const { data, status } = useGQLQuery(
['allNews', skip],
GET_ALL_NEWS_CONTENT,
{ skip, first }
);
const itemCount = Math.ceil(newscount / first);
return (
<div className="generic-page">
<button className="example_b"
onClick={() => skipNews(old => Math.max(old - 5, 0))}
disabled={skip === 0}
>
<span>Previous Page</span>
</button>{' '}
<button className="example_f"
onClick={() => skipNews(old => Math.max(old + 5, 0))}
// Disable the Next Page button when the next skip would be higher than the meta count
disabled={skip + 5 > newscount}
>
<span>Next Page</span>
</button>
<h2>All News</h2>
<p>Page {skip / 5 + 1} of {itemCount}</p>
{status === 'loading' && (
<div>Loading…</div>
)}
{status === 'error' && (
<div>Something went wrong…</div>
)}
{status === 'success' && (
<div>
{data.allNews.map(news => (
<div key={news.title}>{news.title}</div>
))}
</div>
)}
</div>
)
};