Launches pagination implementation is a bad example for reference
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Aptitud para principiantes
- 30/100
- Tipo de issue
- Refactorización
- Claridad
- Necesita aclaración
- Estado de actividad
- Estancado
- Stack tecnológico
- graphql, javascript, node.js
Línea de trabajo
Lee final/server/src/utils.js y final/server/src/resolvers.js, centrándote en paginateResults y Query.launches; rastrea cómo getAllLaunches proporciona datos para cada solicitud. Define el comportamiento previsto de la paginación y verifica que la primera página y las posteriores conserven la semántica de cursor, pageSize, ordering y hasMore sin cargar el conjunto completo de resultados.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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?
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.2k
- Forks
- 808
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de apollographql/fullstack-tutorial
-
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
-
investigate
Dificultad 4/5 3-5 días Aptitud para principiantes 30/100
-
tutorial links are broken Abiertodocumentation
apollographql/fullstack-tutorial#285 · 3 comentarios · 1 asignado ·
-
investigate
Dificultad 3/5 1-2 días Aptitud para principiantes 35/100
apollographql/fullstack-tutorial#255 · 2 reacciones ·
-
enhancement
Dificultad 4/5 3-5 días Aptitud para principiantes 25/100
apollographql/fullstack-tutorial#254 · 2 comentarios ·
Todos los issues de apollographql/fullstack-tutorial
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
mksglu/context-mode#1200 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
anthropics/claude-code#96687 ·
-
good first issue
Dificultad 1/5 Menos de una hora Aptitud para principiantes 95/100
AOSSIE-Org/DebateAI#582 · 2 comentarios ·