DEV Community: Aymane Mimouni

A portfolio for developers with a blog powered by Notion

Aymane Mimouni — Sun, 28 Nov 2021 16:22:24 +0000

Demo: https://aymaneMx.com (my portfolio)
Github: https://github.com/aymaneMx/nuxt-portfolio-dev

Features:

🥰 minimal and clean portfolio
🌗 the dark/light mode (Auto detect the system color-mode)
📱 responsive (tablet & mobile friendly)
⚙️ render articles from Notion 🚀
⭐ fetches your Github pinned projects with most stars
💫 Eslint & Prettier configured
📈 google analytics integration
⚡ generate sitemap (visit /sitemap.xml)
🚀 one-click deployment to netlify

Deploy your own version:

clone the projects from Github, setup Netlify to deploy on each merge to the main branch, I highly recommend this method!
for the lazy people out there, you can use Netlify deploy button

but first, check out the prerequisites.

Prerequisites

create Notion account
duplicate this template by clicking on duplicate button located at the top of the page.
make your notion table public (by clicking on share button located at the top of the page)
grab the table id from the table link: eg:

link: https://aymanemx.notion.site/aymanemx/ceef6f1a895a46b2a0e4a87b41405547?v=8427738adccd4b2a8c28156be3757156
id: ceef6f1a895a46b2a0e4a87b41405547

do the same thing for about page id (we gonna use it as an env variable NOTION_ABOUT_PAGE_ID)
get your Google analytics id (this one is optional)
now you can click to the deploy button and fill the Netlify form

Credits:

🌔 The dark mode : eggsy
🎨 the minimal design : Monotone
⭐ The open source section : mouadziani and smakosh

Using Vue.js Alongside Django Template

Aymane Mimouni — Sat, 09 Jan 2021 03:54:44 +0000

Let’s imagine this scenario, you’re building a Django project, everything going very well. At some point, you needed to level up the interactivity of your app. what are you gonna do?

You will probably achieve the desired behavior using jquery or you will keep your models, build an API, and use a JavaScript SPA for the frontend.

What if I told you that you can keep everything you build with Django, get the interactivity and convenience of Vue.js, without all the overhead of a SPA setup?

This post aims to show that you can start to use Vue with your Django projects immediately without any sophisticated setup that will take hours to complete.

A Demo App

For a demo, I made a simple todo app, so I can play around with vue.js alongside the Django template.

The app shows the users' tasks, and the user can perform basic crud actions.

It looks really simple, but I but it’s a great way to practice some of the key concepts of Vue.

Try to create it yourself, and of course, If you get stuck, you can always get back to my code.

⚡ github.com/aymaneMx/vuejs-alongside-django

Setup

If you check out the official Vue guide, they have links to a CDN where you can simply include Vue via a <script> tag into your Django template:

<script src="<https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js>"></script>

<div id="vue-app">
  [[ message ]]
</div>

var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#vue-app',
  data: {
    message: 'Hello Vue!'
  }
})

That is it, we have already created our very first Vue app! Couple of things to notice here:

el: stand for element, and it provides the Vue instance an existing DOM element to mount on.
Usually, we don’t need to define the limiters explicitly but here we need to because the default delimiters of Vue are the same as the default delimiter of Django, so we need to use something else for Vue and that’s why we’re using [[ ]] here instead of {{ }} .

Access Django Data from Vue

The easiest way is to access a Django template variable from Vue, is by using the built-in Django json_script filter.

{{ django_variable | json_script:"js-data" }}

Go check the documentation, it's a pretty cool way to outputs a Python object as JSON, wrapped in a <script> tag, ready for use with JavaScript.

Unfortunately, This solution doesn't always work!

and that what happened to me when I tried to use the variable tasks in the demo app:

# todo/views.py
def home_view(request):
    tasks = Task.objects.all()
    context = {
        'tasks': tasks,
    }
    return render(request, 'home.html', context)

I get the following error!

Object of type QuerySet is not JSON serializable Django.

The way I solved this issue is by creating a task serializer,

# todo/serializers.py
from rest_framework import serializers
from todo.models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = "__all__"

and I use it in my view:

from django.shortcuts import render
from todo.models import Task
from todo.serializers import TaskSerializer

def home_view(request):
    tasks = Task.objects.all()
    context = {
        'tasks': TaskSerializer(tasks, many=True).data,
    }
    return render(request, 'home.html', context)

Consuming APIs

In the demo app, I was able to create, delete, update tasks, but only on the frontend side, nothing changed in the backend!

So I had to create a simple API that the Vue app can consume and display data from.

Next, I found myself googling how Vuejs consume APIs?

There are several ways to do so, but a very popular approach is to use Axios, which is also recommended in the official Vue Docs.

Same as Vue, You can include Axios via a script tag to your Django template.

<script src="<https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js>"></script>

To pass Django’s CSRF protection mechanism, Axios needs to include the respective cookie in its requests. To accomplish this is to set global Axios defaults:

<script>
    axios.defaults.xsrfCookieName = 'csrftoken';
    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
</script>

For example, let’s delete a task using Axios, assuming that /api/<pk>/delete/ is the right endpoint.

var url = '/api/' + task_id + '/delete/';
axios
    .delete(url)
    .then(response => {
        this.deleteTask(task_id)
    })
    .catch(error => {
        console.log(error);
    });

This call can be done within a Vue instance’s mounted hook or any other place where you can put JavaScript code.

All done!

That wasn’t so hard! Now you can focus on building cool things with Vue on top of an API driven by Django.

The Easiest Way To Generate Fancy Avatars In Python

Aymane Mimouni — Fri, 11 Sep 2020 22:20:28 +0000

This article is originally published in my personal blog.

This is a really short article, where I will show you how to generate cool avatars from a given string (email, username...) or from your logo using python.

The idea for this article came to mind while I was working on a project where I have to set a default avatar for each user from the backend because I was dealing with a backend feeding two frontends, and maybe more in the future.

So, if you're dealing with a single frontend, you would better consider doing it from the frontend, because it's a lot easier.

Before I start, I want to mention that the professional way to do it, is by not generating the avatar, but instead using static images for default avatars, because It's quicker, simpler, less error-prone, more future-proof, and ultimately looks better than generating them programmatically.

But, if you want to be really fancy like Google and have random colored circles and initials, you’re in the right place 😎

Let’s get started!

Avatars using initials

# BUILT-IN
import re
import random

# PIP
from cairosvg import svg2png
from xml.sax.saxutils import escape as xml_escape

COLORS = [
    ['#DF7FD7', '#DF7FD7', '#591854'],
    ['#E3CAC8', '#DF8A82', '#5E3A37'],
    ['#E6845E', '#E05118', '#61230B'],
    ['#E0B050', '#E6CB97', '#614C23'],
    ['#9878AD', '#492661', '#C59BE0'],
    ['#787BAD', '#141961', '#9B9FE0'],
    ['#78A2AD', '#104F61', '#9BD1E0'],
    ['#78AD8A', '#0A6129', '#9BE0B3'],
]

INITIALS_SVG_TEMPLATE = """
<svg xmlns="http://www.w3.org/2000/svg" 
    pointer-events="none" 
    width="200" height="200">
  <defs>
    <linearGradient id="grad">
    <stop offset="0%" stop-color="{color1}" />
    <stop offset="100%" stop-color="{color2}" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" rx="0" ry="0" fill="url(#grad)"></rect>
  <text text-anchor="middle" y="50%" x="50%" dy="0.35em"
        pointer-events="auto" fill="{text_color}" font-family="sans-serif"
        style="font-weight: 400; font-size: 80px">{text}</text>
</svg>
""".strip()
INITIALS_SVG_TEMPLATE = re.sub('(\s+|\n)', ' ', INITIALS_SVG_TEMPLATE)

def get_png_avatar(text, output_file):

    initials = ':)'

    text = text.strip()
    if text:
        split_text = text.split(' ')
        if len(split_text) > 1:
            initials = split_text[0][0] + split_text[-1][0]
        else:
            initials = split_text[0][0]

    random_color = random.choice(COLORS)
    svg_avatar = INITIALS_SVG_TEMPLATE.format(**{
        'color1': random_color[0],
        'color2': random_color[1],
        'text_color': random_color[2],
        'text': xml_escape(initials.upper()),
    }).replace('\n', '')

    svg2png(svg_avatar, write_to=output_file)

What I did here is that I take a pre-prepared SVG template, I fill it with the initials, and background color, and that is it!!

Let's test it,

import string
from io import BytesIO
from PIL import Image

from avatar_generator import get_png_avatar

rawIO = BytesIO()
get_png_avatar('AymaneMx', rawIO)
byteImg = Image.open(rawIO)
filename = ''.join(random.choices(string.ascii_uppercase + string.digits, k=8))
byteImg.save(filename + '.png', 'PNG')

Run, and the result will be a PNG image like this:

While playing with the SVG template, I discovered that I can make an icon or a logo instead of a text, which brings us to the next part.

Avatars using your Logo

To use your logo, you need only to change the text tag in the previous SVG template with a tag of your logo.

For example, I will use the Twitter logo, I downloaded the SVG version from Twitter Brand Resources.

After opening it with any editor you will see:

<svg xmlns="http://www.w3.org/2000/svg" id="Logo_FIXED" data-name="Logo — FIXED" viewBox="0 0 400 400">
    <defs>
        <style>.cls-1{fill:none;}.cls-2{fill:#1da1f2;}</style>
    </defs>
    <title>Twitter_Logo_Blue</title>
    <rect class="cls-1" width="400" height="400"/>
    <path class="cls-2"
          d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/>
</svg>

As you may notice, the path tag is the one responsible for the logo/icon.

Let's copy that in our SVG template, group it in a g tag, and add fill argument so we can change the color,

LOGO_SVG_TEMPLATE = """
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
    <rect class="cls-1" width="400" height="400" fill="{color1}" />
    <g width="400px" height="400px">
        <path 
            fill="{logo_color}" 
            d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
        />
    </g>

</svg>
""".strip()
LOGO_SVG_TEMPLATE = re.sub('(\s+|\n)', ' ', LOGO_SVG_TEMPLATE)

def get_png_avatar_from_logo(output_file):

    random_color = random.choice(COLORS)

    svg_avatar = LOGO_SVG_TEMPLATE.format(**{
        'color1': random_color[0],
        'logo_color': random_color[2],
    }).replace('\n', '')

    svg2png(svg_avatar, write_to=output_file)

Run a test,

rawIO = BytesIO()
filename = ''.join(random.choices(string.ascii_uppercase + string.digits, k=8))
get_png_avatar_from_logo(rawIO)
byteImg = Image.open(rawIO)
byteImg.save(filename + '.png', 'PNG')

The result will be something like this:

Now, you are maybe wondering how can I get an SVG file of my logo?

The answer to that is that you can ask your designer gently for it, or you can do it yourself, using Photoshop/Illustrator by exporting your logo as an SVG file.

But the simple way, (which is why you're here) is by using an online tool as online-convert, I use it for my shitty logo, and here is the result.

Isn’t so fancy!!

That's it

Here you can check out the code, you will find also its Django integration.

👉 https://github.com/aymaneMx/default-avatars

Building a Full-Text Search App Using Django, Docker and Elasticsearch

Aymane Mimouni — Thu, 20 Aug 2020 19:54:03 +0000

In this article, I will be giving you brief information about Elasticsearch, its installation, and some examples of usage.

ElasticSearch

Elasticsearch is a real-time distributed and open-source full-text search and analytics engine. It is accessible from a RESTful web service interface and uses schema-less JSON (JavaScript Object Notation) documents to store data. It is built on Java programming language, which enables Elasticsearch to run on different platforms. It enables users to explore a very large amount of data at a very high speed.

There are some Elasticsearch basics that -once you’ve internalized them- make the learning curve less traumatic. I’ve put together 4 of the most important concepts:

Fields: the smallest individual unit of data in Elasticsearch. Each field has a defined datatype; the core data-types (strings, numbers, dates, booleans), or complex data-types (object and nested).
Index: a collection of different types of documents and document properties. It can be compared to a database in the world of relational databases.
Documents: a collection of fields defined in the JSON format in a specific manner. Every document belongs to a type and resides inside an index. In the world of relational databases, documents can be compared to a row in a table.
Mapping: a collection of documents sharing a set of common fields present in the same index. Again, it’s like a schema in the world of relational databases.

⚠️ It is worth mentioning that Elasticsearch can’t be used as a database, it wasn’t built for this purpose. Due to that, it’s best if you use it as an additional service in your project next to PostgreSQL, MySQL, or other databases.

Using Elasticsearch with Django

Many tutorials are using Django-Haystack, which is very widely used in the Django community, as a modular search to plug ElasticSearch (or any other search engine such as Solr, Whoosh, Xapian, etc.), for its minimal configurations and the query syntax is similar to Django’s ORM.

I’ve used it with Solr recently in a project and I was impressed with how easy it implemented, I loved it, but I will not use it in this article, I think that Elasticsearch itself is simple to use.

I will be using Docker to run Elasticsearch.

Here is the source code so you can see exactly what is going on.

Elasticsearch instance

Edit docker-compose.yml in your project directory to add an ES service:

es:
    image: elasticsearch:7.8.1
    environment:
      - discovery.type=single-node
    ports:
      - "9200:9200"

Then add es to the services that Django app service depends on, and ELASTICSEARCH_DSL_HOSTS=es:9200 to docker-compose.env:

web:
    build: .
    command: python /code/manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - 8000:8000
    env_file:
      - docker-compose.env
    depends_on:
      - db
      - es    <--- here

Now run docker-compose up -d --build

You can check if it works correctly via curl:

curl -X GET localhost:9200/_cluster/health

Set up ElasticSearch

let's Install Django Elasticsearch DSL. Use your favorite Python package manager to install the app from PyPI, I use pipenv.

pipenv install django-elasticsearch-dsl

As with most Django applications, you should add django_elasticsearch_dsl to the INSTALLED_APPS within your settings file:

INSTALLED_APPS = [
    ...
    'django_elasticsearch_dsl',
    ...
]

You must then define ELASTICSEARCH_DSL in your Django settings.

ELASTICSEARCH_DSL = {
    'default': {
        'hosts': os.getenv("ELASTICSEARCH_DSL_HOSTS", 'localhost:9200')
    },
}

Index data into ElasticSearch

Let's consider the following model:

class Post(models.Model):
    title = models.CharField(max_length=128)
    content = models.CharField(max_length=5000)
    created_at = models.DateTimeField(default=timezone.now)
    likes = models.PositiveIntegerField(default=0)
    slug = models.SlugField(max_length=128, db_index=True, null=True)
    draft = models.BooleanField(default=True)

    user = models.ForeignKey(
        User,
        related_name='posts',
        on_delete=models.CASCADE
    )

    def __str__(self):
        return self.title

    class Meta:
        app_label = 'posts'

Run the migrations:

docker-compose run web python manage.py makemigrations
docker-compose run web python manage.py migrate

Now let’s define ElasticSearch index, It required to define Document class in documents.py in your app directory.

from django.contrib.auth import get_user_model
from django_elasticsearch_dsl import Document, fields
from django_elasticsearch_dsl.registries import registry
from .models import Post, Reply

User = get_user_model()

@registry.register_document
class PostDocument(Document):
    user = fields.ObjectField(properties={
        'id': fields.IntegerField(),
        'username': fields.TextField(),
    })

    class Index:
        name = 'posts'
        settings = {'number_of_shards': 1,
                    'number_of_replicas': 0}

    class Django:
        model = Post

        fields = [
            'title',
            'content',
            'created_at',
            'likes',
            'draft',
                        'slug',
        ]

    def get_queryset(self):
        return super(PostDocument, self).get_queryset().select_related(
            'user'
        )

    def get_instances_from_related(self, related_instance):
        if isinstance(related_instance, User):
            return related_instance.posts.all()
        elif isinstance(related_instance, Reply):
            return related_instance.post

Examples of usage

To populate the database with some content, I made a command for that reason, just run:

docker-compose run web python manage.py load_posts 20

Now, let's hop into the interactive Python shell (docker-compose run web python manage.py shell) and play around with ElasticSearch queries:

>>> from posts.documents import PostDocument
>>> posts = PostDocument.search()
>>> for hit in posts:
...     print(hit.title)
... 
Design half three bar quickly material center.
Author true left. Position entire someone study be.
School draw individual sell produce brother.
Truth drug compare TV modern.
Expert apply baby reveal team along.
Beautiful for suddenly half.
Plant argue enough less order receive sing.
Store economy offer decision industry.
Beat chair affect assume score occur include laugh.
Language poor cell fish worry ready industry use.
>>>

Next, I gathered here a list of examples of use you may need:

search = PostDocument.search()

# Filter by single field equal to a value
search = search.query('match', draft=False)

# Filter by single field containing a value
search = search.filter('match_phrase', title="value")

# Add the query to the Search object
from elasticsearch_dsl import Q

q = Q("multi_match", query='python django', fields=['title', 'content'])
search = search.query(q)

# Query combination
or_q = Q("match", title='python') | Q("match", title='django')
and_q = Q("match", title='python') & Q("match", title='django')

# Exclude items from your query
search = search.exclude('match', draft=True)

# Filter documents that contain terms within a provided range.
# eg: the posts created for the past day
search = search.filter('range', created_at={"gte": "now-1d"})

# Ordering
# prefixed by the - sign to specify a descending order.
search = search.sort('-likes', 'created_at')

Quick quiz for you 😄, you can submit your answer in the comments 👇

How to get the published posts created in the past week that contains the word ‘use’ in its title/content?

That’s it!

To be honest, this got quite long. If you are patient enough to read this full and find it interesting then please share it.

GraphQl In Django - An Overview

Aymane Mimouni — Tue, 04 Aug 2020 22:47:46 +0000

Since being introduced by Facebook, GraphQL has been presented as a revolutionary alternative to REST APIs, GraphQL fixes many problems found with RESTful architecture. However, it also introduces a new set of challenges that need to be evaluated. This blog post will walk through things you should know about using graphQl API with Django?

GraphQL (basic concepts)

GraphQl is a data query language and specification developed by Facebook for internal use in its native mobile apps in 2012 to handle sloppy networks and low internet speeds, before being publicly open-sourced in 2015.

The major benefit of GraphQL is the fact that clients can retrieve exactly the data they need from the API. They don’t have to rely on REST endpoints that return predefined and fixed data structures. Instead, the client can dictate the shape of the response objects returned by the API.

Main features

Sending multiple queries in one request
Query defines what data should be defined
Only one endpoint handles all requests

Operations

Queries - fetching data
Mutations - modifying data on the server
Subscriptions - real-time data exchange over WebSockets

It is worth mentioning that all operations are sent as POST requests to a single endpoint /graphql.

Schema

The schema is one of the most important concepts when working with a GraphQL API. It specifies the capabilities of the API and defines how clients can request the data. It is often seen as a contract between the server and the client.

Generally, a schema is simply a collection of GraphQL types. However, when writing the schema for an API, there are some special root types:

type Query { ... }
type Mutation { ... }
type Subscription { ... }

How can we build such a thing in Python?

Before I start talking about graphql using python, I'd like to highlight two concepts related to the schema.

When creating a GraphQL service, we can decide to have the schema be the source of truth and let all our implementation code match its definitions, or we can have our code be the source of truth and have the schema be an artifact generated from the code. The two approaches are called, respectively, schema-first and code-first.

Schema-first

Schema-first indicates that we first define the schema for the GraphQL service and then we implement the code by matching the definitions in the schema. The most popular Python library for implementing GraphQL servers using schema-first approach is Ariadne; it's quite new, simple to use and open for extension.

Code-first

In the code-first approach, we start by coding the resolvers, and then, from code as a single source of truth, we have the schema generated as an artifact. Thus, we still have a schema, but instead of being manually created, it is created by running a script. This approach may also be called resolver-first.

The most popular library that provides tools to implement a GraphQL API in Python using a code-first approach is Graphene.

Actually Graphene is the most popular GraphQL framework for Python (Over 5k stars on Github) because it is fully featured with integrations for the most popular web frameworks and ORMs.

Django Support

Django is supported by the 2 libraries previously mentioned, but since Ariadne is quite new, we will go with Graphene!
There is a library called Graphene-Django which is built on top of Graphene and provides some additional abstractions that make it easy to add GraphQL functionality to your Django project.

For example, Graphene :

Has a built-in view
It can create types from Django models
It can create mutations from Forms and DRF Serializers
Has support for Django filters

If you are interested in building a graphql API step by step, consider visiting #HowToGraphQl tutorial, one of the best starting points.

Authentication & permissions

When using GraphQL with HTTPs you have 3 options for authentication:

Sessions:
Basically you rely on the browser sending cookies to your backend service, this works pretty well with Django. Good when you don’t have a mobile application.
HTTP Headers:
You can use headers when you have third party clients accessing your API or when you have a mobile app. Usually, it is used in combination with JWT tokens.
Field arguments:
This might be a good solution when you only have a few fields that require authentication. It could work like this:

{
  links(token: "YFWh87T") {
    id
    description
    url
  }
}

The concept of authentication and authorization is enabled by default in Django using sessions. Since most of the web apps today are stateless, we will go with the second option which is the JWT Authentication provided by django-graphql-jwt.

The library creates three Mutations:

class Mutation(users.schema.Mutation, graphene.ObjectType):
    token_auth = graphql_jwt.ObtainJSONWebToken.Field()
    verify_token = graphql_jwt.Verify.Field()
    refresh_token = graphql_jwt.Refresh.Field()

TokenAuth : is used to authenticate the User with its username and password to obtain the JSON Web token.
VerifyToken : to confirm that the token is valid, passing it as an argument.
RefreshToken : to obtain a new token within the renewed expiration time for non-expired tokens, if they are enabled to expire.

This library also gives access to restrict permission to particular fields by using decorators:

__all__ = [
    'login_required',
    'user_passes_test',
    'staff_member_required',
    'superuser_required',
    'permission_required',
]

In Django, we have the same decorators to limit access to views, so here we can decorate either resolver functions or the mutations, so it's fairly simple.

Protection against malicious queries

We're giving a lot of control to the user with graphql, we basically allowing them to query data from our server, instead of asking for legitimate, useful data, a malicious actor could submit an expensive, nested query, so it's really easy to create malicious queries!

query maliciousQuery {
  thread(id: "some-id") {
    messages(first: 99999) {
      thread {
        messages(first: 99999) {
          thread {
            messages(first: 99999) {
              thread {
                # ...repeat times 10000...
              }
            }
          }
        }
      }
    }
  }
}

Letting this kind of query through is very bad since it exponentially increases the number of objects loaded and will crash your entire server.

To prevent bad queries to happen we can adopt various solutions:

Timeouts: Check how long a query is taking, if it is taking more than 1 second you can kill it.
Limits on nested fields: You can parse the incoming GraphQL request and deny queries that are requesting for fields that are too nested. For example, you can only allow for maxing 3 levels of nesting and no more.
Query cost: This is useful if you have third party clients and when you also want to limit their API usage.
Hide introspection for production mode (this is not a common solution, but sounds good).

unfortunately, there are no official answers to this problem in Graphene, but All these approaches can be implemented by creating a middleware and a custom backend.

Problems & Limitations

As GraphQL is in an early stage of adoption, it has some weaknesses, like building a fully-fledged API requires additional third-party libraries :

JWT authentication and permissions
File upload: there’s no way to upload files directly as part of your mutations. thankfully, @jaydenseric has come up with a solution that combine the power of GraphQL with the ease of uploading files in a multi-part request.
Optimize database access inside graphene queries: Because it's really easy to fill into the famous N+1 problem, In this regard, this library came to optimize the queries using select_related, prefetch_related and only methods of Django QuerySet. So, if you're working on the high-load back-end, Better to avoid Graphql, as it is harder to optimize.

The problems mentioned above are related only to Graphene!, here are the ones related to Graphql itself:

The queries always return an HTTP status code of 200, regardless of whether or not that query was successful. If the query is unsuccessful, the response JSON will have top-level errors key with associated error messages and stack-trace. This can make it much more difficult to do error handling and can lead to additional complexity for things like monitoring.
Another disadvantage is the lack of built-in caching support. Because REST APIs have multiple endpoints, they can leverage native HTTP caching to avoid re-fetching resources. With GraphQL, you will need to set up your own caching support which means relying on another library or setting up something like globally unique IDs for your backend.

Summary

To sum up:

GraphQL is a great tool for data exchange between backend and frontend while using it has several downsides...
Despite the limitations, Graphene is still the most developed GraphQL framework for Python.

By reading this article, I would suppose that you know enough to decide whether you will use GraphQl in your next Django project or not.

Thanks for reading!

This article is originally published on https://obytes.com/