GraphQL mit Apollo - wie fetchMore zu verwenden

Question

Ich habe ein Problem mit Apollo fetchMore Methode zu verstehen. Ich bin neu in diesem Werkzeug und example in doc ist zu kompliziert für mich. Ich habe im Internet gesucht, kann aber keine weiteren (aktuellen) Beispiele finden. Kannst du mir helfen, ein einfaches Beispiel für unendliche Ladedaten zu schreiben? Ich habe diesen Code:

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

 
const ProductsListData = graphql(productInfo)(ProductsList)

und ich möchte 5 Produkte holen und 5 mehr nach jedem Klick auf ‚Mehr laden‘ klicken. Ich verstehe die Idee von diesem - Cursor e.t.c, aber ich weiß nicht, wie man das umsetzt. (Ich benutze React)

Answer 1

Für unendlich laden, würden Sie einen Cursor verwenden. Referenzierung das Beispiel auf der Apollo-Dokumentation, http://dev.apollodata.com/react/pagination.html#cursor-pages

Schneiderei diese zu Ihrem Schema, das Sie zur Verfügung gestellt haben, ist es so etwas wie dieses (Ungeprüfte)

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

Sie werden wahrscheinlich haben aussehen würde um mit dem Pfad der Objekte herumzuspielen, da dies ähnlich wie Ihr Schema aussehen sollte. In den meisten Fällen sollte jedoch Ihre endlose Scroll-Paginierung aussehen.