Launches pagination implementation is a bad example for reference
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Idoneità per principianti
- 30/100
- Tipo di issue
- Refactoring
- Chiarezza
- Da chiarire
- Stato di attività
- Ferma
- Stack tecnologico
- graphql, javascript, node.js
- Ambito
- backend-api-design, performance
Direzione di ricerca
Leggi final/server/src/utils.js e final/server/src/resolvers.js, concentrandoti su paginateResults e Query.launches; traccia il modo in cui getAllLaunches fornisce i dati per ogni richiesta. Definisci il comportamento previsto della paginazione e verifica che la prima pagina e quelle successive preservino la semantica di cursor, pageSize, ordering e hasMore senza caricare l’intero insieme dei risultati.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
The GraphQL server-side cursor pagination example should be discarded. While the intent of the paginateResults function in final/server/src/utils.js is good, there are a number of significant flaws with this implementation.
The lowest hanging fruit is that there is a line of code at the end of the function - results.slice(cursorIndex >= 0 ? cursorIndex + 1 : 0, cursorIndex >= 0); which is unreachable.
However, the most egregious error is how the launches function is defined in final/server/src/resolvers.js - which gives the impression that data is being paged responsibly. It is not
Every time pagination is invoked, the API request loads ALL THE DATA from the API and then passes it to the pagination function. For the example SpaceX data, there are approximately 76 results that get loaded and then processed to return the 20 results the user is expecting:
Query: {
launches: async (_, { pageSize = 20, after }, { dataSources }) => {
const allLaunches = await dataSources.launchAPI.getAllLaunches();
// we want these in reverse chronological order
allLaunches.reverse();
const launches = paginateResults({
after,
pageSize,
results: allLaunches,
});
return {
launches,
cursor: launches.length ? launches[launches.length - 1].cursor : null,
// if the cursor of the end of the paginated results is the same as the
// last item in _all_ results, then there are no more results after this
hasMore: launches.length
? launches[launches.length - 1].cursor !==
allLaunches[allLaunches.length - 1].cursor
: false,
};
},
...
If that API endpoint were to return a massive amount of data (imagine 40,000 results), this resolver would load all 40,000 results and then find 20 to return. When the user would click load more, all 40,000 results would be loaded into memory again and then the next 20 results would be returned...effectively processing 80,000 results to display 40 to the user. EEK!
This is definitely something that should be revisited. Imagine a scenario with 30 users following a simple workflow of viewing the first 20 results and then loading an additional 20 results.
Additionally, if the result set grew (imagine 40,001 records), the newest record would never be displayed to the user because it would have been in a spot the cursor presumably has already visited, right?
- Lingua principale
- TypeScript
- Stelle
- 1.2k
- Fork
- 808
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di apollographql/fullstack-tutorial
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 35/100
-
investigate
Difficoltà 4/5 3-5 giorni Idoneità per principianti 30/100
-
tutorial links are broken Apertadocumentation
apollographql/fullstack-tutorial#285 · 3 commenti · 1 assegnatario ·
-
investigate
Difficoltà 3/5 1-2 giorni Idoneità per principianti 35/100
apollographql/fullstack-tutorial#255 · 2 reazioni ·
-
enhancement
Difficoltà 4/5 3-5 giorni Idoneità per principianti 25/100
apollographql/fullstack-tutorial#254 · 2 commenti ·
Tutte le issue di apollographql/fullstack-tutorial
Issue simili
-
blocklist removal
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
MetaMask/eth-phishing-detect#296544 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
pastelsky/bundlephobia#1122 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100