Graphql with Apollo - fetchMoreの使い方

Question

私はApollo fetchMoreメソッドの理解に問題があります。私はこのツールを初めて使い、example in docはあまりにも複雑です。私はインターネットで検索していましたが、もっと（現在の）例は見つけられません。あなたは、無限の読み込みデータの最も簡単な例を書くのを助けてくれますか？私はこのコードを持っている：

const productInfo = gql` 
 
    query { 
 
    allProducts { 
 
     id 
 
     name 
 
     price 
 
     category { 
 
     name 
 
     } 
 
    } 
 
    }` 
 

 
const ProductsListData = graphql(productInfo)(ProductsList)

をし、私はすべてをクリックして「ロード詳細」ボタン後5つの製品と5以上を取得したいです。私はこれのアイデアを理解しています - カーソルe.t.cしかし、私はこれを実装する方法を知らない。 （私はリアクトを使用しています）

Answer 1

無限のロードでは、カーソルを使用します。 http://dev.apollodata.com/react/pagination.html#cursor-pages

、アポロのドキュメント上の例を参照することが

const ProductsListData = graphql(productInfo, { 
 
    props({ data: { loading, cursor, allProducts, fetchMore } }) { 
 
    return { 
 
     loading, 
 
     allProducts, 
 
     loadMoreEntries:() => { 
 
     return fetchMore({ 
 
      variables: { 
 
      cursor: cursor, 
 
      }, 
 
      updateQuery: (previousResult, { fetchMoreResult }) => { 
 
      const previousEntry = previousResult.entry; 
 
      const newProducts = fetchMoreResult.allProducts; 
 
      return { 
 
       cursor: fetchMoreResult.cursor, 
 
       entry: { 
 
       allProducts: [...previousEntry.entry.allProducts, ...newProducts], 
 
       }, 
 
      }; 
 
      }, 
 
     }); 
 
     }, 
 
    }; 
 
    }, 
 
})(ProductsList);

あなたは可能性があります。この（未テスト）のようになります、あなたが提供してきた自分のスキーマに、この仕立てこれはあなたのスキーマに似ているはずなので、オブジェクトのパスを使って遊びます。しかし、これはほとんどの場合、無限のスクロールページングの実装がどのように見えるかです。