Follow

Follow
Integrating GraphQL API into a Django project #02

Integrating GraphQL API into a Django project #02

Madat Bay's photo
Madat Bay
·Sep 19, 2021·

5 min read

In the second part of the series, we are going to install and configure the Graphene-Django package to our Django application. Yet currently we don't have a Django project, as a first step, we start from initializing it. We will build a reviews app that will contain, companies and reviews. Each review will be connected to one of the companies.

Let's start from our Django project 🚀

Just simply create a parent folder that will contain all of the project files. As a next step, we need to install Django and start our project (I prefer using python venv).

mkdir django-graphql-reviews && cd django-graphql-reviews
python3 -m venv venv
source venv/bin/activate
pip3 install django
# initialize django project named "core" in current directory
django-admin startproject core .

We have successfully created our Django project so far. Next, we need to start and add our review app to the project.

python3 manage.py startapp reviews

Open the project in the preferred code editor (I'm using VSCode for all my projects) and add reviews app to settings.py in core project:

# Open VSCode in the current path
code .

Add config of the reviews app to the INSTALLED_APPS. I prefer adding the app by the config, but we can only add reviews:

INSTALLED_APPS = [
    ...
    'reviews.apps.ReviewsConfig'
]

Next, we need to create and add urls.py for the reviews app. So, simply create urls.py in the reviews app with the following content:

from django.urls import path
from .views import index

app_name = "reviews"

urlpatterns = [
    path("", index, name="index")
]

In the code above, we set / path (line 7) to render our index view in the reviews app. But we haven't created it yet. Let's do it by modifying views.py in the reviews app to prevent the app to crash:

from django.http.response import HttpResponse
from django.shortcuts import render

# Create your views here.

def index(request):
    return HttpResponse("Django GraphQL Reviews App")

In the last step, we need to modify the urls.py file in the core project folder to include the URL file of the review app:

# core/urls.py
...
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("reviews.urls", namespace="reviews"))
]

Now, let's start and preview our basic Django application. Before starting the server, we need to run migrations to apply initial database changes:

python3 manage.py migrate
...
python3 manage.py runserver

Our project should be started and we can check it by opening our browser on http://localhost:8000/

Preview of simple Django app

Install Graphene

Graphene is a simple python package that helps us to use GraphQL in our python applications. We will use graphene-django in our Django application to prevent incompatibility and this package speeds up our coding with built-in "Django like" features

Requirements

  • >= Django 1.11

Installation 🤓

Installation and configuration process is too easy, just don't forget to stop the development server of your Django application:

pip3 install graphene-django

Add graphene_django application to our INSTALLED_APPS:

Side Note: please make sure django.contrib.staticfiles app is in INSTALLED_APPS too (It's there by default). It's required for GraphiQL - user interface for GraphQL queries.

INSTALLED_APPS = [
    ...
    "django.contrib.staticfiles", # Required for GraphiQL
    "reviews.apps.ReviewsConfig",
    "graphene_django"
]

We need to add a graphql URL to the urls.py of our Django application. In our case, I will add it to the reviews application, yet we can add it to urls.py of our Django project to make GraphQL available over all the project:

# Modify reviews/urls.py

from django.urls import path
from .views import index

from graphene_django.views import GraphQLView

app_name = "reviews"

urlpatterns = [
    path("", index, name="index"),
    path("graphql", GraphQLView.as_view(graphiql=True)),
]

graphiql=True declaration enables GraphiQL for our application. If you don't want graphical user interface for GraphQL just simply turn it off (graphiql=False).

Finally, let's define the schema location for Graphene in the settings.py file of our Django project. Schema is a simple " model/schema" of our GraphQL queries:

# core/settings.py
GRAPHENE = {
    "SCHEMA": "reviews.schema.schema"
}

Let's parse reviews.schema.schema to get a better understanding of the configuration of Schemas

  • reviews - Django application schema.py file resides
  • schema - the name of the file where the instance of Schema class is
  • schema - this 2nd schema is the name of the instance of Schema class

Let's create our first schema on the basis of the information above:

  1. Create schema.py in the reviews app
  2. Populate the file we created with the following content. We will analyze code when we write our first query: ``` import graphene

The first query

class Query(graphene.ObjectType): hello = graphene.String(default_value="Hi!")

instance of the Schema class with the query above

schema = graphene.Schema(query=Query)

Preview GraphQL with GraphiQL:

Would you like to see the result? If yes, just start the development server and visit http://localhost:8000/graphql (This is the URL we defined in reviews/urls.py)

GraphiQl example

Run the first query

If you remember, we added a simple query when we create schema.py file:

class Query(graphene.ObjectType):
    hello = graphene.String(default_value="Hi!")

If we take it short, this means - The main query has a field "hello" with the default value of "Hi!". So it's time to call and get our first query. Write the following query to the left column on the GraphiQL and click the run button above:

query {
  hello
}

We can omit the query keyword above, GraphQL accepts it as query if there is none by default. Anyway, the result of the query is:

{
  "data": {
    "hello": "Hi!"
  }
}

In the next articles, we are going to write our Django models for our Reviews project and write queries, mutations for GraphQL API.

 
Share this