A single function is added for fetching any queries by only a single method....

A single function is added for fetching any queries by only a single method. Server side is modified to find out which data the user asking for

.gitignore

 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/node_modules
 /src/node_modules
 /server/node_modules
 /.pnp
@@ -22,3 +23,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/.vscode

client/src/components/Movies.tsx

@@ -5,6 +5,18 @@ type MyProps = {};
 type MyState = {
     movies: any
 };
+
+enum ColumnType{
+    Id,
+    Title, 
+    Genre,
+    Rating,
+    Year,
+    DirectorFirstName,
+    DirectorLastName,
+    Description
+}
+
 class Movies extends React.Component<MyProps, MyState> {
     constructor(props: any) {
         super(props);
@@ -14,6 +26,7 @@ class Movies extends React.Component<MyProps, MyState> {
         }
     }
 
+
     getAllMoviesQuery = `
     query {
         getAllMovies {
@@ -22,15 +35,8 @@ class Movies extends React.Component<MyProps, MyState> {
     }`
     createMovieQuery = `
     mutation {
-        createMovie(title: "testing", genre: "gaming", rating_dice_throw: 1, year: 2000, director_first_name: "torje", director_last_name: "the_gamer", description: "amazing", cover_image: "url123") {
-            id
-        }
-    }`
-    getMovieByIdQuery=`
-    query {
-        getMovieById(id: 1) {
+        createMovie(title: "testing", genre: "gaming", rating_dice_throw: 1, year: '2000', director_first_name: "torje", director_last_name: "the_gamer", description: "amazing", cover_image: "url123") {
             id
-            title
         }
     }`
     
@@ -42,18 +48,60 @@ class Movies extends React.Component<MyProps, MyState> {
         .then(res => console.log(this.state.movies))
     }
 
-    getMovieById() {
-        this.queryFetch(this.getMovieByIdQuery, 'POST')
+    generateQuery(columnType: ColumnType, value: string, neededData: string){
+
+        let column = '';
+
+        switch(columnType){
+            case ColumnType.Title:
+                column = 'title';
+                break;
+            case ColumnType.Genre:
+                column = 'genre';
+                break;
+            case ColumnType.Rating:
+                column = 'rating_dice_throw';
+                break;
+            case ColumnType.Year:
+                column = 'year';
+                break;
+            case ColumnType.DirectorFirstName:
+                column = 'director_first_name';
+                break;
+            case ColumnType.DirectorLastName:
+                column = 'director_last_name';
+                break;
+            case ColumnType.Description:
+                column = 'description';
+                break;
+            default:
+                column = 'id';
+                break;
+        
+        }
+
+        return `
+        query {
+            getMovieByColumnType(${column}: "${value}") {
+                ${neededData}
+            }
+        }`;
+    }
+
+    getMovieByColumnType(columnType : ColumnType, value: string, neededData: string) {
+        this.queryFetch(this.generateQuery(columnType, value, neededData) , 'POST')
         .then(res => res.json())
-        .then(res => this.setState({ movies: res.data.getMovieById }))
+        .then(res => this.setState({ movies: res.data.getMovieByColumnType }))
         .then(res => console.log(this.state.movies))
     }
 
+
     componentDidMount() {
         //this.getAllMovies();
-        this.getMovieById();
+        this.getMovieByColumnType(ColumnType.Genre, 'Drama', 'id title genre description');
     }
 
+
     queryFetch(query: String, method: string) {
         return fetch('/graphql', {
             method: method,
@@ -69,7 +117,7 @@ class Movies extends React.Component<MyProps, MyState> {
     render() {
         return (
             <ul>
-                {this.state.movies.map((movie: any) => <li>{JSON.stringify(movie)}</li>)}
+                {this.state.movies.map((movie: any) => <li key="{movie.title}">{JSON.stringify(movie)}</li>)}
             </ul>
         );
     }

server/src/server.ts

@@ -12,11 +12,11 @@ import * as filmControllers from './controllers/films.controllers';
 const MovieType = new GraphQLObjectType({
     name: "Movie",
     fields: () => ({
-        id: { type: GraphQLInt },
+        id: { type: GraphQLString },
         title: { type: GraphQLString },
         genre: { type: GraphQLString },
         rating_dice_throw: { type: GraphQLInt },
-        year: { type: GraphQLInt },
+        year: { type: GraphQLString },
         director_first_name: { type: GraphQLString },
         director_last_name: { type: GraphQLString },
         description: { type: GraphQLString },
@@ -37,18 +37,41 @@ const RootQuery = new GraphQLObjectType({
                 // return filmControllers.getFilms()
             }
         },
-        getMovieById: {
+        getMovieByColumnType: {
             type: new GraphQLList(MovieType),
-            args: { id: { type: GraphQLInt } },
+            args: {  
+                id: { type: GraphQLString },
+                title: { type: GraphQLString },
+                genre: { type: GraphQLString },
+                rating_dice_throw: { type: GraphQLInt },
+                year: { type: GraphQLString },
+                director_first_name: { type: GraphQLString },
+                director_last_name: { type: GraphQLString },
+                description: { type: GraphQLString },
+            },
             async resolve(parent: any, args: any) {
                 const connection = await connect();
-                const response = await connection.query('SELECT * FROM movie WHERE id = ?', [args.id]);
+                let query = '';
+                if(typeof args.id!='undefined' && args.id){query = getQuery('id' , args.id)}
+                else if(typeof args.title!='undefined' && args.title){query = getQuery('title' , args.title)}
+                else if(typeof args.genre!='undefined' && args.genre){query = getQuery('genre' , args.genre)}
+                else if(typeof args.rating_dice_throw!='undefined' && args.rating_dice_throw){query = getQuery('rating_dice_throw' , args.rating_dice_throw)}
+                else if(typeof args.year!='undefined' && args.year){query = getQuery('year' , args.year)}
+                else if(typeof args.director_first_name!='undefined' && args.director_first_name){query = getQuery('director_first_name' , args.director_first_name)}
+                else if(typeof args.director_last_name!='undefined' && args.director_last_name){query = getQuery('director_last_name' , args.director_last_name)}
+                else if(typeof args.description!='undefined' && args.description){query = getQuery('description' , args.description)}
+
+                const response = await connection.query(query);
                 return response[0];
             }
         }
     }
 })
 
+function getQuery(key: String, value: string){
+    return 'SELECT * FROM movie WHERE ' + key + ' = "'  + value + '"'
+}
+
 const Mutation = new GraphQLObjectType({
     name: "Mutation",
     description: 'This is for creating a movie',