如何解决我可以在没有 apollo / react-query 的情况下将 React 无限滚动与 GraphQL 和 datoCMS 一起使用吗?
我想对新闻进行分页,或使用无限滚动,但由于网站已建成然后作为静态文件提供,我不确定最好的方法是什么?
是否可以不使用 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,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;
解决方法
在 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>
)
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。