Fügen Sie der graphql paginierten Abfrage die Filteroption

Question

hinzu

Ich verwende dieses nette apollo-universal-starter-kit in einem meiner Projekte. Ich habe eine Aufgabe, eine Filteroption zu this page hinzuzufügen, um Beiträge zu filtern, die mehr als 2 Kommentare haben.

Das Starterkit verwendet Apollo graphql-server als Back-End. Die Schemabeschreibung für die Beiträge wie folgt aussieht:

# Post 
type Post { 
    id: Int! 
    title: String! 
    content: String! 
    comments: [Comment] 
} 

# Comment 
type Comment { 
    id: Int! 
    content: String! 
} 

# Edges for PostsQuery 
type PostEdges { 
    node: Post 
    cursor: Int 
} 

# PageInfo for PostsQuery 
type PostPageInfo { 
    endCursor: Int 
    hasNextPage: Boolean 
} 

# Posts relay-style pagination query 
type PostsQuery { 
    totalCount: Int 
    edges: [PostEdges] 
    pageInfo: PostPageInfo 
} 

extend type Query { 
    # Posts pagination query 
    postsQuery(limit: Int, after: Int): PostsQuery 
    # Post 
    post(id: Int!): Post 
} 

postsQuery verwendet wird, ein paginierte Ergebnis des Pfostens

Hier zu erzeugen ist, wie postsQuery Entschlüsse (vollständiger Code here)

async postsQuery(obj, { limit, after }, context) { 
     let edgesArray = []; 
     let posts = await context.Post.getPostsPagination(limit, after); 

     posts.map(post => { 
     edgesArray.push({ 
      cursor: post.id, 
      node: { 
      id: post.id, 
      title: post.title, 
      content: post.content, 
      } 
     }); 
     }); 

     let endCursor = edgesArray.length > 0 ? edgesArray[edgesArray.length - 1].cursor : 0; 

     let values = await Promise.all([context.Post.getTotal(), context.Post.getNextPageFlag(endCursor)]); 

     return { 
     totalCount: values[0].count, 
     edges: edgesArray, 
     pageInfo: { 
      endCursor: endCursor, 
      hasNextPage: values[1].count > 0 
     } 
     }; 
    } 

Und Hier ist eine graphql-Abfrage, die am Front-End mit React post_list Komponente verwendet wird (vollständiger Code für die Komponente ist here)

query getPosts($limit: Int!, $after: ID) { 
    postsQuery(limit: $limit, after: $after) { 
     totalCount 
     edges { 
      cursor 
      node { 
       ... PostInfo 
      } 
     } 
     pageInfo { 
      endCursor 
      hasNextPage 
     } 
    } 
} 

Das war eine lange Einleitung :-), sorry

Frage:

Wie kann ich Filterung Option zum post_list Komponente/Seite? Ich verstehe die React-Seite der Frage, aber ich verstehe die Graphql nicht. Sollte ich dem eine neue Variable hinzufügen, so sieht es wie postsQuery(limit: $limit, after: $after, numberOfComments: $numberOfComments) aus? Und dann irgendwie auf dem Back-End lösen? Oder ich bin auf dem Holzweg und sollte in die andere Richtung denken? Wenn ja, kannst du mich in die richtige Richtung weisen? :-)

Vielen Dank im Voraus!

Answer 1

IMO Ich würde das definitiv auf dem Backend lösen. Soweit es eine neue Variable sein sollte, würde ich persönlich ja sagen, und Ihre Post.getPostsPagination könnte aktualisiert werden, um das Filtern nach Kommentaren zu unterstützen, idealerweise möchten Sie dies als Teil der DB-Anfrage, damit Sie wissen, dass Sie es sind Sie erhalten N Anzahl der Arten von Posts, die Sie möchten, sonst öffnet es die Tür für Edgecases in Ihrer Paginierung.

Die andere Option ist eine neue Abfrage für CuratedPosts oder FilteredPosts oder was auch immer Sie es nennen möchten, die bereits basierend auf der Anzahl der Kommentare filtern kann.