Как использовать функцию Apollo GraphQL fetchMore для получения предыдущего и следующего результата из Wordpress WPGraphql Graphql Source - PullRequest
Новая
       45

Как использовать функцию Apollo GraphQL fetchMore для получения предыдущего и следующего результата из Wordpress WPGraphql Graphql Source

0 голосов
/ 05 марта 2020

Заранее спасибо, я действительно ценю работу за WPGraphQL и Apollo, я новичок в Reactjs и GraphQL, но я хочу использовать этот технический стек для моего нового клиента. И я застрял, чтобы использовать это при разбиении на страницы архива блога, любая помощь, предложение или ссылка на конкретную статью была бы полезной.

В настоящее время я могу получить больше результатов, но я также хочу получить предыдущие результаты, такие как Кнопка «Далее» и «Предыдущая» в архиве блога. 

import React from 'react';
import Link from 'next/link';
import { useQuery } from '@apollo/react-hooks';

import POSTS_QUERY from '../graphql/posts.query';

const PostsList = ({ query }) => {

  // Create a query hook
  const { data, loading, error, fetchMore } = useQuery(POSTS_QUERY, {
    variables: { first: 5, after: null }
  });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {JSON.stringify(error)}</p>;
  }

  const posts = data.posts;

  const endCursor = posts.pageInfo.endCursor;
  const disableNextButton = posts.pageInfo.hasNextPage ? false : true;

  const startCursor = posts.pageInfo.startCursor;
  const disablePrevButton = posts.pageInfo.hasPreviousPage ? false : true;

  const apolloPaginate = (paginate) => fetchMore({
    variables: paginate,
    updateQuery: (previousResult, { fetchMoreResult }) => {

      const newEdges = fetchMoreResult.posts.edges;
      const pageInfo = fetchMoreResult.posts.pageInfo;      

      return newEdges.length
        ? {
            posts: {
              __typename: previousResult.posts.__typename,
              edges: [...previousResult.posts.edges, ...newEdges],
              pageInfo
            }
          }
        : previousResult;
    }
  }) 

  return (
    <div> 
      <ul>        
        {posts.edges.map( ( {node} ) => {
          const post = node;
          return (
            <li key={`post__${post.id}`}>
              <Link href="/[slug]" as={`/${post.slug}`}>
                <a>{post.title}</a>
              </Link>
            </li>
          )
        })}
      </ul>

      <button onClick={ () => apolloPaginate({ last: 5, before: startCursor }) } disabled={disablePrevButton}> Prev </button>
      <button onClick={ () => apolloPaginate({ first: 5, after: endCursor }) } disabled={disableNextButton}>Load More</button>
    </div>
  );
};

export default PostsList;

Если я реализую Prev Button, я вижу в консоли ошибку, говорящую

You can not use after and before together in graphql query

Мой запрос заключается в том, как мы можем использовать fetchMore для извлечения обоих Next и предыдущие результаты. Также Как мы реализуем пронумерованную навигацию как

Prev 1 2 3 4 Next

...