はじめに

前回の続きです。

前の記事: Docker+Django+Next+TypeScript+ECSでアプリを作った話(2) ~ Djangoの初期設定からModel作成編 ~
次の記事: Docker+Django+Next+TypeScript+ECSでアプリを作った話(4) ~ Djangoのテスト編

今回はDjangoプロジェクトにスキーマを作成して、ブラウザにてデータを取得する所までを書きました。

1.スキーマ作成

以下のようにフォルダ、ファイルを新規作成します。

 myProject/
     app/
         app/
+           schema.py            
         ...
         api/
+           schema.py
+           utils/
+               validator.py

validator.py

ユーザー作成、プロフィール編集のMutationに使用するバリデーションを作成します。

validator.py

import re
from graphql import GraphQLError

def validate_blank(value):
    if value == "":
        raise GraphQLError("Value is required")
    return value

def validate_too_long(value, num):
    if len(value) > num:
        raise GraphQLError("Value is too long")
    return value

def validate_nickname(value):
    validate_blank(value)
    validate_too_long(value, 20)
    return value

def validate_email(value):
    match = re.match(r'[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$', value)
    if not match:
        raise GraphQLError("Invalid Email Address")
    return value

def validate_password(value):
    validate_blank(value)
    if len(value) < 6:
        raise GraphQLError("Password is too short")

api/schema.py

ユーザー作成、トークン取得、ユーザー削除、プロフィール編集のMutationと、
自身のプロフィールと全プロフィールを取得するQueryを作成します。
拡張機能として、relayを使用します。

api/schema.py

import graphene
import graphql_jwt

from graphene_django import DjangoObjectType
from graphene_django.filter import DjangoFilterConnectionField
from graphene import relay
from graphql_jwt.decorators import login_required

from api.models import CustomUser, Profile
from api.utils.validator import validate_nickname, validate_email, validate_password

class UserNode(DjangoObjectType):
    class Meta:
        model = CustomUser
        filter_fields = {
            'email': ['exact'],
        }
        interfaces = (relay.Node,)

class ProfileNode(DjangoObjectType):
    class Meta:
        model = Profile
        filter_fields = {
            'nickname': ['exact', 'icontains'],
        }
        interfaces = (relay.Node,)


class CreateUserMutation(relay.ClientIDMutation):
    class Input:
        nickname = graphene.String(required=True)
        email = graphene.String(required=True)
        password = graphene.String(required=True)

    user = graphene.Field(UserNode)

    def mutate_and_get_payload(root, info, **input):
        nickname = validate_nickname(input.get('nickname'))
        email = validate_email(input.get('email'))
        password = validate_password(input.get('password'))
        user = CustomUser(
            email=email,
        )
        user.set_password(password)

        user.save()
        profile = Profile(
            nickname=nickname,
            user=user
        )
        profile.save()

        return CreateUserMutation(user=user)

class DeleteUserMutation(relay.ClientIDMutation):
    class Input:
        confirm = graphene.Boolean(required=True)

    user = graphene.Field(UserNode)

    @login_required
    def mutate_and_get_payload(root, info, **input):
        user = info.context.user
        user.delete()

        return DeleteUserMutation(user=None)

class UpdateProfileMutation(relay.ClientIDMutation):
    class Input:
        nickname = graphene.String(required=True)

    profile = graphene.Field(ProfileNode)

    @login_required
    def mutate_and_get_payload(root, info, **input):
        profile = info.context.user.profile
        profile.nickname = validate_nickname(input.get('nickname'))
        profile.save()

        return UpdateProfileMutation(profile=profile)

class Mutation(graphene.AbstractType):
    token_auth = graphql_jwt.ObtainJSONWebToken.Field()
    create_user = CreateUserMutation.Field()
    delete_user = DeleteUserMutation.Field()
    update_profile = UpdateProfileMutation.Field()

class Query(graphene.ObjectType):
    my_profile = graphene.Field(ProfileNode)
    all_profile = DjangoFilterConnectionField(ProfileNode)

    @login_required
    def resolve_my_profile(self, info, **kwargs):
        return Profile.objects.get(user=info.context.user.id)

    @login_required
    def resolve_all_profile(self, info, **kwargs):
        return Profile.objects.all()

app/schema.py

api/schema.pyのスキーマを読み込む様に記載します。

app/schema.py

import graphene
import api.graphql.schema

class Query(api.graphql.schema.Query, graphene.ObjectType):
    pass

class Mutation(api.graphql.schema.Mutation, graphene.ObjectType):
    pass

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

urls.py

データを操作するためのエンドポイントを追加します。

urls.py

  from django.contrib import admin
  from django.urls import path
+ from graphene_django.views import GraphQLView
+ from app.schema import schema
+ from django.views.decorators.csrf import csrf_exempt

  urlpatterns = [
      path('admin/', admin.site.urls),
+     path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True, schema=schema))),
]

コンテナを起動して、localhost:8000/graphqlにアクセスすれば、graphqlのページが表示されます。

graphqlページの左側に以下の記載をすれば、一連のデータ操作が可能です。

mutation CREATE_USER{
  createUser(input: { nickname: "user", email: "user@example.com", password: "password" }) {
  	user {
      id
    }
  }
}

mutation TOKEN_AUTH{
  tokenAuth(email: "user@example.com", password: "password") {
    token
  }
}

mutation UPDATE_MYPROFILE{
  updateProfile(input: {nickname: "user update"}) {
    profile {
      nickname
    }
  }
}

mutation DELETE_USER {
  deleteUser(input: {confirm: true}) {
    user {
      id
    }
  }
}

query MY_PROFILE{
  myProfile {
    nickname
  }
}

query ALL_PROFILE{
  allProfile {
    edges {
      node {
        nickname
      }
    }
  }
}

ユーザー削除、プロフィール編集、プロフィール取得に関しては、トークン認証ができていない場合、操作ができないように記述しているため、　　
(ブラウザでGoogleChromeを使用していることを前提とします。)ModHeaderという拡張機能をGoogleChromeに追加してヘッダーに、
graphqlページで取得したトークンを記載すれば操作が可能となります。

まとめ

User認証に関わるUserモデル、Profileモデルのスキーマを作成して、データを操作する所まで書きました。
次回はDjangoプロジェクトのスキーマをテストする所を書きたいと思います。

次の記事: Docker+Django+Next+TypeScript+ECSでアプリを作った話(4) ~ Djangoのテスト編