Django + GraphQL + React —1. Integrate GraphQL into your Django project

Introduce how to use GraphQL to connect Django and React

django + GraphQL + React

Suppose you have a basic knowledge about Django and React, and you want to use GraphQL instead of APIs to connect them, then you can know how to achieve your goal in these 2 articles: This one and Django + GraphQL + React — 2. Integrate GraphQL into your React project

In this article, we will focus on the backend, and in the next one, we will integrate GraphQL into the frontend.

The Github Repository for the code below can be found at :
https://github.com/ZoeLiao/Django-GraphQL-React-Demo

Ok, let’s start.

Create Basic GraphQL Server

Follow the README.md of graphene_django to create a basic GraphQL server.

First install Django and GraphQL by the following commands:

pip install Django
pip install graphene-django

Then create your Django project and app:

django-admin startproject myproject
cd myproject
django-admin startapp myapp

Add graphene and your app in myproject/settings.py:

INSTALLED_APPS = [
    ...
    'graphene_django',
    'myapp',
]

Add GraphQL url in myproject/url.py:

...
from graphene_django.views import GraphQLView

urlpatterns = [
    ...
    path('graphql/', GraphQLView.as_view(graphiql=True)),
]

Add a simple UserModel in myapp/models.py:

from django.db import models

class UserModel(models.Model):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)

Add a file named schema.py in myapp/, and paste the following code into the file, then we will have a basic schema:

import graphene
from graphene_django import DjangoObjectType

from myapp.models import UserModel

class UserType(DjangoObjectType):
    class Meta:
        model = UserModel

class Query(graphene.ObjectType):
    users = graphene.List(UserType)

    def resolve_users(self, info):
        return UserModel.objects.all()

schema = graphene.Schema(query=Query)

Add our schema in myproject/settings.py:

GRAPHENE = {
    'SCHEMA': 'myapp.schema.schema'
}

Migrate and start your Django server:

python manage.py makemigrations myapp
python manage.py migrate
python manage.py runserver

Visit http://localhost:8000/graphql then you will have your GraphiQL. (the GraphQL integrated development environment (IDE))
Congratulations!

However, you will get error when you press the running button, because currently we don’t have any user. Therefore, we need to create one.

failed to get users’ information

Use Mutation to Create a User

Let’s add mutation in myapp.schema.py

Add CreateUser class:

class CreateUser(graphene.Mutation):
    id = graphene.Int()
    first_name = graphene.String()
    last_name = graphene.String()

    class Arguments:
        first_name = graphene.String()
        last_name = graphene.String()

    def mutate(self, info, first_name, last_name):
        user = UserModel(first_name=first_name, last_name=last_name)
        user.save()

        return CreateUser(
            id=user.id,
            first_name=user.first_name,
            last_name=user.last_name,
        )

Add Mutation class:

class Mutation(graphene.ObjectType):
    create_user = CreateUser.Field()

And add Mutations to schema:

schema = graphene.Schema(
    query=Query,
    mutation=Mutation
)

Then we can user mutation to create a user in the GraphQL.:))

mutation

Here is the mutation used in the GraphiQL above, if you don’t know how to use it, you can click the Docs on the right side of GraphiQL:

mutation createUser($first_name: String, $last_name: String){
  createUser(first_name: $first_name, lastName: $last_name) {
    id
    lastName
    first_name
  }
}

Now query again you can get your user.:)

Query

In the next article, we will focus on how to request the backend GraphQL from the frontend.

howtographql/graphql-python

graphql-python/graphene-django