Added limit to allMovies-query for pagination

client/src/components/Movies.tsx

@@ -6,7 +6,8 @@ import InfiniteScroll from "react-infinite-scroller";
 
 type MyProps = {};
 type MyState = {
-    movies: any
+    movies: any,
+    lim: number
 };
 
 enum ColumnType{
@@ -25,14 +26,15 @@ class Movies extends React.Component<MyProps, MyState> {
         super(props);
 
         this.state = {
-            movies: []
+            movies: [],
+            lim: 33
         }
     }
 
 
     getAllMoviesQuery = `
     query {
-        getAllMovies {
+        getAllMovies(lim: 13) {
             id,title,genre,rating_dice_throw,year,director_first_name,director_last_name,description,cover_image
         }
     }`
@@ -43,9 +45,18 @@ class Movies extends React.Component<MyProps, MyState> {
         }
     }`
 
+    generateAllMoviesQuery(lim: number){
+        return `
+            query {
+                getAllMovies(lim: ${lim}) {
+                    title,genre,year
+                }
+            }`
+    }
+    
 
     getAllMovies() {
-        this.queryFetch(this.getAllMoviesQuery, 'POST')
+        this.queryFetch(this.generateAllMoviesQuery(this.state.lim), 'POST')
         .then(res => res.json())
         .then(res => this.setState({ movies: res.data.getAllMovies }))
         .then(res => console.log(this.state.movies))

server/src/server.ts

@@ -28,9 +28,12 @@ const RootQuery = new GraphQLObjectType({
     fields: {
         getAllMovies: {
             type: new GraphQLList(MovieType),
+            args: {
+                lim: {type: GraphQLInt}
+            },
             async resolve(parent: any, args: any) {
                 const connection = await connect();
-                const response = await connection.query('SELECT * FROM movie');
+                const response = await connection.query('SELECT * FROM movie LIMIT '+args.lim);
                 return response[0];
                 // return filmControllers.getFilms()
             }