DEV Community: RJ-1998

Add custom filters to django admin and more...

RJ-1998 — Sat, 17 Sep 2022 13:00:48 +0000

Checkout my blog post on my website to learn how to add custom filters on django admin and much more...

https://rishabh-tech-blog.vercel.app/blog/django-admin-customization/customize-django-admin-part-1

How to add SQL editor to your django admin.

RJ-1998 — Sun, 01 May 2022 17:10:32 +0000

You can also read the whole article on my blog

Overview

Hey there! 😎 In this tutorial, you will learn how to add a SQL Editor 🌈 to your django admin interface having read-only access to the database. You can find the source code on this github repo. Let's jump right in, it's gonna be a lot of fun!

Introduction

Before creating a SQL editor you can argue that why the hell do we even need a SQL editor in django admin as we have all the features of django therein already. Having an admin interface with filters and search is not enough when you are working on a real-world project.

As it happens that are a lot of cases when you wish you had a SQL editor there in the admin interface then it would have saved you a lot of effort to get short insights from DB directly instead of using some BI tool.
Having a SQL editor with read-only access (SELECT queries) can help you to find what you need from your DB in no time and it would be just a SQL query away.

About Codemirror

Codemirror is a web-based editor that is easy to configure and supports all sorts of programming languages. There is another popular option ace c9 which is also good and can be used for this tutorial.
But we are going to stick with codemirror for our tutorial and you can find the link to their website in the resources section below.

Editor theming and addons

Codmirror is highly customizable and it provides a lot of themes to choose from and a lot of plugins to add to your editor. Let's see how to configure the editor step by step

Step1:- Download the codemirror project

It doesn't come as a pip or npm package so you have to download the whole project to your computer in a folder separate from your django application.
The whole project is divided into lots of folders inside which you can find the addon or theme of your choice. We won't be adding all those to our project.

Step2:- Select your theme

Go inside the codemirror folder and you will find a folder named theme where you can find all sorts of theming options for your editor in form of CSS file! Just grab that file and add it inside static/yourAppName/css folder of your django application. For this tutorial, I have used dracula.css.

This was easy, right! But wait you also need one more file to get it all working codemirror.css which you can find inside the lib folder. And this is all to setup the styles of your editor.

Step3:- Select plugins and addons

All the files specified below go inside static/yourAppName/js folder in your django application.

First, you have to add codemirror.js file as this is the base javascript file for your editor.

Then add the sql.js which you can find inside mode/sql folder.
Then add these files matchbrackets.js , closebrackets.js , closetag.js which you can find inside addon/edit folder.
Add active-line.js from addon/selection folder and then add comment.js file from addon/comment folder.

All these addons will make your SQL editor easier to write your queries. You can surely explore more addons as there are many which can enhance the user experience.

After following all the above steps your static folder should look something like this

static
    - yourAppName
        - css
            - codemirror.css
            - dracula.css
        - js
            - active-line.js
            - closebrackets.js
            - closetag.js
            - codemirror.js
            - comment.js
            - matchbrackets.js
            - sql.js

Create a template

Now that you have selected theme and addons, its time to create a HTML template to display your SQL editor.
Add the following file inside templates/admin folder

// live_editor.html

{% extends 'admin/base_site.html' %} {% load static %} {% block content %}
<html lang="en">
    <head>
        <!-- load codemirror base javascript file and jquery to make http calls -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="{% static 'starwars/js/codemirror.js' %}"></script>
        <!-- load codemirror theme and some custom css-->
        <link rel="stylesheet" href="{% static 'starwars/css/style.css' %}" />
        <link href="{% static 'starwars/css/codemirror.css' %}" type="text/css" rel="stylesheet" />
        <link href="{% static 'starwars/css/dracula.css' %}" rel="stylesheet" />
        <!-- load remaining addons for SQL editor -->
        <script src="{% static 'starwars/js/active-line.js' %}"></script>
        <script src="{% static 'starwars/js/matchbrackets.js' %}"></script>
        <script src="{% static 'starwars/js/closebrackets.js' %}"></script>
        <script src="{% static 'starwars/js/comment.js' %}"></script>
        <script src="{% static 'starwars/js/sql.js' %}"></script>
    </head>
    <body>
        <div class="parent_flex_container">
            <span class="page_header_text">SQL code editor</span>
            <button class="uploadBtn" id="submit">Run Query</button>
        </div>
        <!-- SQL editor will be a textarea -->
        <form method="POST" action="" id="editor-form" enctype="multipart/form-data">
            {% csrf_token %}
            <textarea id="editor"></textarea>
        </form>
        <br />
        <div class="parent_flex_container">
            <h2>Query results <span id="rowsCount"></span></h2>
            <button class="downloadBtn" id="downloadReport" style="display:none">
                Download Results
            </button>
        </div>
        <table style="display:block;max-height:60vh;overflow-x: scroll;white-space: nowrap;"></table>
        <script>
            // your javascript logic will go here
        </script>
    </body>
</html>
{% endblock %}

After adding the above html, you should be able to see this at localhost:8000/admin/live-editor

Send Query over API call

After adding SQL editor to the admin we want to send the SQL query to the python to be executed on the Database.
So we will use jquery to make an API call. Let's see the process:-

// live_editor.html

// your html code
<table style="display:block;max-height:60vh;overflow-x: scroll;white-space: nowrap;"></table>
{{endpoint|json_script:"endpoint"}}
<script>
    $(document).ready(() => {
        let endpoint = JSON.parse($("#endpoint").text());
        // codemirror editor configuration
        var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            mode: "sql",
            theme: "dracula",
            lineNumbers: true,
            styleActiveLine: true,
            matchBrackets: true,
            autoCloseBrackets: { highlightNonMatching: true },
        });
        // detect event whenn user want to comment some code
        document.addEventListener("keydown", function (event) {
            if (event.ctrlKey && event.key === "/") {
                editor.toggleComment();
            }
        });
        // call the api when user clicks on Run Query button
        $("#submit").click((e) => {
            e.preventDefault()
            // make a POST request to django
            $.ajax({
                type: "POST",
                dataType: "json",
                url: endpoint,
                data: {
                    // grab the query written in the editor
                    query: JSON.stringify(editor.getDoc().getValue()),
                    csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val(),
                    action: "post"
                },
                beforeSend: () => {
                    // clear the output table before each submission
                    $("table th").remove()
                    $("table tr").remove()
                },
                success: (data) => {
                    if (data.error) {
                        $("table").append(`<th>An Error Occurred</th>`)
                        $("table").append(`<tr><td>${data.error}</td></tr>`)
                    }
                    else {
                        $("#rowsCount").text(`: ${data.rows.length} rows returned`)
                        // populate table headers
                        data.columns.forEach((obj) => {
                            $("table").append(`<th>${obj}</th>`);
                        });
                        // populate table rows
                        data.rows.forEach((obj) => {
                            let cols = "";
                            Object.entries(obj).map(([key, val]) => {
                                cols = cols + `<td>${val}</td>`;
                            });
                            $("table").append(`<tr class="child">${cols}</tr>`);
                        });
                    }
                },
                complete: () => {
                    $("#downloadReport").show();
                },
            })
        });
        // handle download report event
        $("#downloadReport").click(() => {
            var html = document.querySelector("table").outerHTML;
            export_table_to_csv(html, "query_results.csv");
        });
        function export_table_to_csv(html, filename) {
            var csv = [];
            var rows = document.querySelectorAll("table tr");

            for (var i = 0; i < rows.length; i++) {
                var row = [];
                var cols = rows[i].querySelectorAll("td, th");

                for (var j = 0; j < cols.length; j++) row.push(cols[j].innerText);

                csv.push(row.join(","));
            }
            download_csv(csv.join("\n"), filename);
        }

        function download_csv(csv, filename) {
            var csvFile;
            var downloadLink;

            csvFile = new Blob([csv], { type: "text/csv" });
            downloadLink = document.createElement("a");
            downloadLink.download = filename;
            downloadLink.href = window.URL.createObjectURL(csvFile);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
            downloadLink.click();
        }
    });
</script>

Following is a detailed explanation of the code in plain English:-

First, define the configuration of the editor as per the codemirror documentation.
Handle the event where the user wants to comment out some lines of code.
Make a POST request to django with the query via AJAX call when the user hits the Run Query button.
- Here before making the request we are doing some DOM manipulation which clears the table below the editor
- And after the successful response, we will populate the table either with error or the data which has arrived from response.
Lastly, we are giving an option to the user if he wishes to download the tabular response in a csv file.

Execute your SQL

So far we have discussed how to make an API call having the user query to the django on a particular endpoint. Now in this section, we would be looking at how to process user queries and return the response.
Also, we want to make sure that the user is only allowed to run SELECT statements and avoid running any other DML queries. Let's see how to achieve that.

Below we have defined a new path in urls.py file to render our editor and handle requests in views.py.

# urls.py

from django.contrib import admin
from django.urls import path

from starwars.views import live_sql_editor

urlpatterns = [
    path('admin/live-editor/', live_sql_editor, name="sql_editor"),
    path('admin/', admin.site.urls)
]

Now let's move on to our main logic where we will handle requests made by AJAX.

# views.py

import json
import sqlparse

from django.http import HttpResponse
from django.shortcuts import render
from django.db import connection

def live_sql_editor(request):
    if request.method == "POST":
        # read the query from request
        user_query = json.loads(request.POST.get("query"))
        columns = []
        queryset = None
        error_message = None # handling error messages
        if user_query:
            # open a connection to the DB
            with connection.cursor() as cursor:
                try:
                    # only allow SELECT queries to be run. it will also allow (with CTEs)
                    parsed_statement = sqlparse.parse(user_query)
                    for statement in parsed_statement:
                        if statement.get_type() != "SELECT":
                            raise Exception("Invalid query! Only select statements are allowed")
                    # execute SQL with cursor
                    cursor.execute(user_query)
                    columns = [col[0] for col in cursor.description]
                    queryset = cursor.fetchall()
                except Exception as e:
                    error_message = str(e)
        context = {
            "columns": columns,
            "rows": queryset,
            "error": error_message
        }
        return HttpResponse(json.dumps(context), content_type="application/json")
    context = {
        "endpoint": "/admin/live-editor/"
    }
    return render(request, "admin/live_editor.html", context)

Following is a brief explanation of the above code:-

Read the query coming from a request in a variable
Open a connection to the DB with connection.cursor()
Parse the SQL query from the request and check if the query is SELECT only
Execute the query if it's fine and return the resultant queryset of the query

Have a look at the example results of the final version.

Conclusion

In this tutorial, we have seen how we can easily configure a SQL code editor in django admin which only allows users to run read-only queries. This approach can save time when you want to get
short insights from your DB in production. Also, this adds a really cool feature for admins who use this admin portal day-to-day.

There are some enhancements that can be done to improve the experience of this feature, for example, the error messages are not very informative which can create friction while running large queries. Another one is, that if it returns large number of rows
then it will jank the DOM which again affects the user experience. I will try to address these issues in the future and will also update this blog.

I hope you have learned some new things from this article and if you do then please drop a like and share with your colleagues and friends. See you in the next one 👋!

Resources

Official website of Codemirror.
Download codemirror project here.
Checkout SQLParse documnetation to filter SELECT statements here.

How to import large csv file in Django-admin.

RJ-1998 — Sun, 03 Oct 2021 08:47:40 +0000

You can also read the whole article on my blog

Overview

In this tutorial, we will look at an alternative approach to import csv files in django-admin. This tutorial is intended for intermediate to advanced level developers. All the code related to the tutorial is available in the github repo.

Introduction

If you have worked on django, then there's a high probability that you have already used the popular django-import-export library which works smoothly in django-admin and gives developers lots of freedom to import/export all sorts of files. (If you haven't seen it do check it out here because we'll be using it 😉).

Although it's good for importing model-specific files as it gives the specific headers for that particular model. But what if you want to import data that leads to different tables in your database and you want to perform some custom logic and data validation. Also, suppose you want to import very large files (say 20k rows), it will be computation heavy and will run a lot of queries. I came across the same requirement while I was working on a project and using default django-import-export is not the way to do it. We have to CUSTOMIZE it!

Setup the project

Setup a virtual environment
Install Django and create a new project
Install django-import-export

pip install django-import-export

Add django-import-export to your INSTALLED_APPS

INSTALLED_APPS = [
    ...
    'import_export',
]

Define your models. I've used StarWars API so accordingly, I've created the following model

#models.py
from django.db import models

# Create your models here.
class Characters(models.Model):
    name = models.CharField(max_length=255,null=True,blank=True)
    height = models.FloatField(null=True, blank=True)
    mass = models.FloatField(null=True, blank=True)
    hair_color = models.CharField(max_length=25,null=True, blank=True)
    skin_color = models.CharField(max_length=25,null=True, blank=True)
    eye_color = models.CharField(max_length=25,null=True, blank=True)
    birth_year = models.CharField(max_length=25,null=True, blank=True)
    gender = models.CharField(max_length=25,null=True, blank=True)

    class Meta:
        verbose_name = "Characters"

    def __str__(self):
        return str(self.name)

Apply ImportExportModelAdmin in your admin

#admin.py
# your imports
from import_export.admin import ImportExportModelAdmin

@admin.register(models.Characters)
class CharactersAdmin(ImportExportModelAdmin,admin.ModelAdmin):
    # your admin logic for the model
    ...

If you have done the setup correctly then you should be able to see the import/export buttons in the django admin.

Create a template

In this step, we'll be overriding the default import view of django and provide our custom template. This template will be essential in sending and receiving requests to and from the Django-admin. For this, we have to first override the default import method of ImportExportModelAdmin.

#admin.py
# your imports
from django.shortcuts import render
from django import forms

# create a form field which can input a file
class CsvImportForm(forms.Form):
    csv_file = forms.FileField()

@admin.register(models.Characters)
class CharactersAdmin(ImportExportModelAdmin,admin.ModelAdmin):
    list_display = ("name","birth_year","gender")

    def import_action(self,request):
        form = CsvImportForm()
        context = {"form": form, "form_title": "Upload StarWars characters csv file.",
                    "description": "The file should have following headers: "
                                    "[NAME,HEIGHT,MASS,HAIR COLOR,EYE COLOR,SKIN COLOR,BIRTH YEAR,GENDER]."
                                    " The Following rows should contain information for the same.",
                                    "endpoint": "/admin/starwars/characters/import/"}
        return render(
            request, "admin/import_starwars_characters.html", context
        )

Now create a new html template called import_starwars_characters.html
inside the templates/admin folder in your app. You can find the template here in my git repo.

Once you're done then you'll be able to see your custom template when you click the import button.

Add Jquery and AJAX

This is the main step of this recipe. Here we will be doing the paginated AJAX calls to our python logic inside django itself!

Let's do it step by step.

Step1:- Create a promise to read the csv

Yes, you heard it right! We will utilize Javascript's Promises to read the csv file contents. Here is the code with some useful comments.

//import_starwars_characters.html

// this is the secure way to get some hidden data into javascript from python
// to learn about it more find the resources at the end
{{endpoint|json_script:"endpoint"}}
<script>
  // all the javascript goes here .....
</script>

//import_starwars_characters.html

let headers = []; // to store csv file headers
let allData = []; // to store all the rows except headers
let file_name = "";
let totalentries = 0;
// get the endpoint we want our AJAX call to hit
// reading it from json_script
let endpoint = JSON.parse($("#endpoint").text());

// <!--  pagination variables-->
let pageSize = 10;
let pages = 0;
// it will store limit-offset objects
let pageObjs = [];

// <!--  promise to read csv so that submit button gets enabled-->
// <!--  only after file has been read-->

function readCSVPromise(lines) {
  return new Promise((resolve, reject) => {
    // store headers and rows
    headers = lines.slice(0, lines.indexOf("\n")).split(",");
    let data = lines.slice(lines.indexOf("\n") + 1).split("\n");
    data.forEach((row) => {
      let x = row.split(",");
      if (x.length > 1) {
        allData.push(x);
      }
    });
    if (data.length > 0) {
      resolve(true);
    } else {
      reject(false);
    }
  });
}

A brief explanation of the above code is that we resolve our promise if we have the data with length > 0 otherwise we reject the promise.

Step2:- Add event listener to read the input file

Let's add an event listener to our file input button that will run when we upload the file through it. We will then run our promise and wait till it gets finished. Once it's done, we then start paginating the data using limit-offset method.

//import_starwars_characters.html

//<!--  read csv file and perform pagination of rows-->

$("#csvfile").change((e) => {
  // regex to validate file name and extension
  var regex = /^([^\s]+[a-zA-Z0-9\s_\\.\-:()\[\]])+(.csv)$/;
  if (regex.test($("#csvfile").val().toLowerCase())) {
    // initialize javascript's FileReader
    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/FileReader
    var reader = new FileReader();
    reader.onload = function (e) {
      var lines = e.target.result;
      // start storing all the data
      readCSVPromise(lines)
        .then((result) => {
          // when done start paginating the data
          pages = Math.ceil(allData.length / pageSize);
          for (let pageNo = 1; pageNo <= pages; pageNo++) {
            let limit = pageNo * pageSize;
            let offset = pageNo * pageSize - pageSize;
            if (limit >= allData.length) {
              limit = allData.length;
            }
            pageObjs.push({ limit: limit, offset: offset });
          }
          // enable submit button
          $("#submit").prop("disabled", false);
        })
        .catch((result) => {
          $("#submit").prop("disabled", true);
        });
    };
    file_name = e.target.files.item(0).name;
    reader.readAsText(e.target.files.item(0));
  } else {
    alert("Please select a csv file!!");
  }
});

Step3:- Send AJAX requests to Django

Now that we have read the csv file and its contents, we are good to call the AJAX requests to Django. Since we want to do the paginated requests, there can be n number of calls, so we will call them sequentially. Here's how we do it.

//import_starwars_characters.html

//<!--  Perform multiple sequential AJAX Calls on submit click event  -->

let looper = $.Deferred().resolve();
$("#submit").click((e) => {
  e.preventDefault();
  // $.when.apply is the way to call multiple AJAX calls
  // apply functions accepts two arguments => (this,array of requests)
  // for array of requests we are using map function to loop over pageObjs
  // that returns AJAX request
  $.when
    .apply(
      $,
      $.map(pageObjs, (pageObj, i) => {
        looper = looper.then(() => {
          return callImportRequest(pageObj);
        });
        return looper;
      })
    )
    .then((res) => {
      // once all requests are finished then enable download report button
      console.log("Upload Finished!!");
      $("#downloadReport").show();
    })
    .catch((err) => {
      console.log(err);
    });
});

And now to call the actual AJAX request we will do like the following

//import_starwars_characters.html

//<!--  Paginated AJAX call to initiate file upload  -->

function callImportRequest(pageObj) {
  let deferred = $.Deferred();
  let offset = pageObj.offset;
  let limit = pageObj.limit;
  // contains paginated data
  let rows = allData.slice(offset, limit);
  $.ajax({
    type: "POST",
    dataType: "json",
    url: endpoint,
    data: {
      file_name: JSON.stringify(file_name),
      csv_headers: JSON.stringify(headers),
      rows: JSON.stringify(rows),
      page_no: JSON.stringify(offset),
      csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val(),
      action: "post",
    },
    beforeSend: () => {
      $("#spinner").show();
    },
    success: function (data) {
      // here we will update our DOM to show the object status
      $("#file_name").text(data.file);
      totalentries += data.entries;
      $("#entries").text(totalentries);
      $("table").append(
        `<tr class="parent" onclick="handlecollapse($(this))"><td class="checkpoint">Entries: ${offset} to ${limit}</td><td></td><td></td></tr>`
      );
      data.results.forEach((obj) => {
        $("table").append(
          `<tr class="child"><td>${obj.character}</td><td>${obj.status}</td><td>${obj.msg}</td></tr>`
        );
      });
      deferred.resolve(data);
    },
    complete: () => {
      $("#spinner").hide();
    },
  });
  return deferred.promise();
}

Custom import logic

We have made it this far! Now the last step is to Custom import logic to create the objects in our database. Here we write our custom logic of import and try to save some queries using bulk_create.

#admin.py

# your imports
from starwars.utils import ImportUtils
from django.contrib import admin
from starwars import models
from import_export.admin import ImportExportModelAdmin
from django.shortcuts import render
from django import forms
from django.http import HttpResponse
import json

def import_action(self, request):
    import_object_status = []
    create_new_characters = []
    if request.method == "POST":
        # clear the list for every new request
        create_new_characters = []
        # capture payload from request
        csv_file = json.loads(request.POST.get("file_name"))
        reader = json.loads(request.POST.get("rows"))
        column_headers = json.loads(request.POST.get("csv_headers"))
        # helper class for validation and other stuff
        # look into git repo
        util_obj = ImportUtils(column_headers)

        for row in reader:
            name = row[util_obj.get_column("NAME")]
            height = util_obj.validate_data(row[util_obj.get_column("HEIGHT")])
            mass = util_obj.validate_data(row[util_obj.get_column("MASS")])
            hair_color = row[util_obj.get_column("HAIR COLOR")]
            eye_color = row[util_obj.get_column("EYE COLOR")]
            skin_color = row[util_obj.get_column("SKIN COLOR")]
            birth_year = row[util_obj.get_column("BIRTH YEAR")]
            gender = row[util_obj.get_column("GENDER")]
            create_new_characters.append(
                models.Characters(
                    name=name, height=height, mass=mass, hair_color=hair_color, eye_color=eye_color,
                    skin_color=skin_color, birth_year=birth_year, gender=gender))
            import_object_status.append({"character": name, "status": "FINISHED",
                                        "msg": "Character created successfully!"})
        # bulk create objects
        models.Characters.objects.bulk_create(create_new_characters)
        # return the response to the AJAX call
        context = {
            "file": csv_file,
            "entries": len(import_object_status),
            "results": import_object_status
        }
        return HttpResponse(json.dumps(context), content_type="application/json")
    # below code just displays the template once in the django-admin
    form = CsvImportForm()
    context = {"form": form, "form_title": "Upload users csv file.",
                "description": "The file should have following headers: "
                "[NAME,HEIGHT,MASS,HAIR COLOR,EYE COLOR,SKIN COLOR,BIRTH YEAR,GENDER]."
                " The Following rows should contain information for the same.",
                "endpoint": "/admin/starwars/characters/import/"}
    return render(
        request, "admin/import_user_from_csv.html", context
    )

In brief, the above code just listens to every AJAX request and captures the payload. Then with that payload, it creates new entries in the Characters model and returns the response back to the call.

Points to remember

Although the above implementation works pretty well and can handle large csv files, there are some points to remember while considering this approach.

Clicking Cancel does not cancel the whole operation. This means that if you close the browser window or close the tab or click on cancel, then the operations which have already run can not be reverted.
It does not provide you a preview of your data. This is implemented in django-import-export pretty well, but sadly not here. I will try to include this feature also in the next iteration.
You have to do your own data validation either before uploading the file or inside your import logic in Python.

Conclusion

Django-import-export is great and works pretty well for most cases, but when it comes to adding customize business logic then you have to look for some other alternatives. In this article, I tried to convince you that it is possible to customize the default django-import-export features and you can import large csv files. I hope this article has given you some new information and approach to customizing django-admin. I hope you have learned something new from here and if so then please appreciate the efforts by liking the post and share it with your peers.

Resources

Official Django docs explaining about json_script.
Here is an article for further reading on json_script.
A great article that explains how to use deffered objects.

What things you take care before deploying your projects in production?

RJ-1998 — Mon, 06 Jan 2020 07:30:50 +0000

I was wondering that what are the different things professional developers take care before deploying their projects to production.

Thanks for answering.
Have a nice day!

Graphql Enthusiasts! I need your help🙏

RJ-1998 — Tue, 15 Jan 2019 12:53:22 +0000

I've been trying to get some help from #help section but no one came up with a solution. Graphql Enthusiasts I need your help🙏.

I want to create a simple Login/Logout functionality using reactjs and graphql. I followed some YouTube videos and some blogs on other websites and all of them end up with creating a separate auth.js file and resolver.js file which is completely different from the context of my project.

Here's my schema file

I want to perform a login mutation just like addPost mutation and addUser mutation, I don't know how to do it. I think there is something to do with resolve method but I'm unable to figure out.

Here's my Login react component

I want to receive a confirmation here that if the user is able logged in or not and if he is then he should remain logged in until he clicks the logout button.

Guys please help me, although it's not a big deal to create a login/logout feature but this graphql thing looks hard to conceive for me.

I hope someone will come up with a good solution.

Login/Logout functionality with Reactjs and Graphql

RJ-1998 — Mon, 14 Jan 2019 14:49:21 +0000

I'm trying to build a login/logout functionality using Graphql and Reactjs.
Here's my schema file

I want to create a login mutation inside which I want to check if the user with certain email-id exist or not and if exists then password matches or not. This logic should be inside the resolve method but I am unable to figure out how to do it.
Here's my Login React Component

I also want to keep track of the token so that the user remains logged in if he or she refresh the page.
If someone has the solution please let me know 🙏