我可以在没有 apollo / react-query 的情况下将 React 无限滚动与 GraphQL 和 datoCMS 一起使用吗？答案

【问题标题】：Can I use React infinite scroll with GraphQL and datoCMS without apollo / react-query?我可以在没有 apollo / react-query 的情况下将 React 无限滚动与 GraphQL 和 datoCMS 一起使用吗？
【发布时间】：2021-03-02 16:59:44
【问题描述】：

我想对新闻进行分页，或者使用无限滚动，但由于网站是建立然后作为静态文件提供的，我不确定最好的方法是什么？

是否可以不使用 apollo 或 react-query？

我确实尝试过 react-query，但无法让它看到我的 datoCMS 端点。

（更新：关于承诺的评论）

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;

【问题讨论】：

不是答案，但 react-query 看不到或看不到任何东西。它希望您返回一个 Promise，实际的数据获取可以根据您的需要进行。也可以回Promise.resolve(5)??????‍♂️
啊，谢谢你解释了为什么我的代码有错误！你能指出我上面代码中的下一步吗？
我需要了解什么不起作用。代码看起来没问题。

标签： pagination apollo infinite react-query

【解决方案1】：

在 datoCMS 和 react-query 社区的帮助下，这里是解决方案！ …

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>
  )
};

【讨论】：