Apollo GraphQL Fetch更多

Question

我正在尝试让 Apollo gql 在单击按钮后加载更多帖子。所以它会加载接下来的 15 个结果，每次点击 - 加载更多。

这是我当前的代码

import Layout from "./Layout";
import Post from "./Post";
import client from "./ApolloClient";
import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag";

const POSTS_QUERY = gql`
  query {
    posts(first: 15) {
      nodes {
        title
        slug
        postId
        featuredImage {
          sourceUrl
        }
      }
    }
  }
`;

const Posts = props => {
  let currPage = 0;
  const { posts } = props;
  const { loading, error, data, fetchMore } = useQuery(
    POSTS_QUERY,
    {
      variables: {
        offset: 0,
        limit: 15
      },
      fetchPolicy: "cache-and-network"
    });

  function onLoadMore() {
    fetchMore({
      variables: {
        offset: data.posts.length
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        return Object.assign({}, prev, {
          posts: [...prev.posts, ...fetchMoreResult.posts]
        });
      }
    });
  }

  if (loading) return (
      <div className="container mx-auto py-6">
        <div className="flex flex-wrap">
          Loading...
        </div>
      </div>
  );
  if (error) return (
      <div className="container mx-auto py-6">
        <div className="flex flex-wrap">
          Oops, there was an error :( Please try again later.
        </div>
      </div>
  );
  return (
      <div className="container mx-auto py-6">
        <div className="flex flex-wrap">
          {data.posts.nodes.length
            ? data.posts.nodes.map(post => <Post key={post.postId} post={post} />)
            : ""}
        </div>

        <button onClick={() => { onLoadMore() }}>Load More</button>
      </div>
  );
};

export default Posts;

当您单击加载更多时，它会刷新查询和控制台错误 Invalid attempt to spread non-iterable instance

我一直在加载解决方案，但很多示例都是上一页或下一页，如传统分页。或者我不想要的基于游标的无限加载器。我只想在 onClick 列表中添加更多帖子。

感谢任何建议，谢谢。

Answer 1

你当前的POSTS_QUERY 不接受变量，所以首先你需要改变这个：

const POSTS_QUERY = gql`
  query postQuery($first: Int!, $offset: Int!) {
    posts(first: $first, offset: $offset) {
      nodes {
        title
        slug
        postId
        featuredImage {
          sourceUrl
        }
      }
    }
  }
`;

现在，它将使用您的useQuery 和fetchMore 中列出的变量。

要完成错误是因为updateQuery不正确，请将其更改为：

function onLoadMore() {
    fetchMore({
      variables: {
        offset: data.posts.nodes.length
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        return { posts: { nodes: [...prev.posts.nodes, ...fetchMoreResult.posts.nodes] } };
        });
      }
    });
  }

Answer 2

我建议使用 useState 挂钩来管理存储数据集中当前偏移量的变量，放置一个 useEffect 来观察该偏移量的变化，将偏移值作为查询变量传递以加载数据。去掉 fetchmore，useEffect 钩子就可以了。

当用户点击加载更多按钮时，你只需要更新偏移值，就会触发查询和更新数据。

const [offset,setOffset] = React.useState(0)
const [results, setResults] = React.useState([])

const { loading, error, data } = useQuery(
    POSTS_QUERY,
    {
      variables: {
        offset: offset,
        limit: 15
      },
      fetchPolicy: "cache-and-network"
    }
);

React.useEffect(() => {
 const newResults = [...results, ...data]
 setResults(newResults)
}, [data])

function onLoadMore() {
 setOffset(results.data.length)
}