Wagtail CMS（Django）およびGraphQLの使用開始

ReactをWagtail CMSに追加する必要があり、GraphQLを使用する必要がある場合は、このガイドが役立ちます。



これは、ブレント・クラークによるWagtail公式ブログの記事の翻訳です。

GraphQLレベルでWagtail CMS（Django）を既存のサイトモデルと統合できることは、ForeignKeyと小さなコンバーターを少しだけ使用して、ブログ記事内で既存のAPI呼び出しを使用できることを意味します。

必須です：

• プロジェクトの空のフォルダー
• Python 3.6
• virtualenv
• Wagtail CMSのインストール （ インストールガイド ）

標準的なブログの作成を始めましょう。

ブログアプリを追加します。

python manage.py startapp blog 

blog / models.pyを次のコンテンツで更新します

 # Taken From http://docs.wagtail.io/en/v1.9/getting_started/tutorial.html from __future__ import unicode_literals from django.db import models # Create your models here. from wagtail.wagtailcore.models import Page from wagtail.wagtailcore.fields import RichTextField from wagtail.wagtailadmin.edit_handlers import FieldPanel from wagtail.wagtailsearch import index class BlogIndexPage(Page): intro = RichTextField(blank=True) content_panels = Page.content_panels + [ FieldPanel('intro', classname="full") ] class BlogPage(Page): date = models.DateField("Post date") intro = models.CharField(max_length=250) body = RichTextField(blank=True) search_fields = Page.search_fields + [ index.SearchField('intro'), index.SearchField('body'), ] content_panels = Page.content_panels + [ FieldPanel('date'), FieldPanel('intro'), FieldPanel('body', classname="full"), ] 

Wagtail CMS（Django）とGraphQLを実装するには、Grapheneを使用します。

注：このソリューションは、Graphene-djangoパッケージのおかげで、多くのDjangoプロジェクトに共通です。

グラフェンのインストール：

 pip install "graphene-django==1.2" 

グラフェンのセットアップ：

GRAPHENEパラメーターをbase.pyに追加します

 GRAPHENE = { 'SCHEMA': 'api.schema.schema', } 

APIアプリケーションを追加します。

mysiteサイトのルートフォルダーにapiというフォルダーを作成します

apps.pyを追加します

新しいapiフォルダー内にapps.pyファイルを作成し、 次のファイルをそこに貼り付けます。

 from django.apps import AppConfig class ApiConfig(AppConfig): name = 'api' 

schema.pyを追加します

apiフォルダー内に、次の内容の別のschema.pyファイルを作成します。

 from __future__ import unicode_literals import graphene from graphene_django import DjangoObjectType from blog.models import BlogPage from django.db import models class ArticleNode(DjangoObjectType): class Meta: model = BlogPage only_fields = ['id', 'title', 'date', 'intro', 'body'] class Query(graphene.ObjectType): articles = graphene.List(ArticleNode) @graphene.resolve_only_args def resolve_articles(self): return BlogPage.objects.live() schema = graphene.Schema(query=Query) 

URL設定

2つの新しいインポートをurls.pyファイルに追加します。

 from django.views.decorators.csrf import csrf_exempt from graphene_django.views import GraphQLView 

Wagtailアドレスのすぐ上にある2つの新しいURLをurls.pyファイルに追加します。

 url(r'^api/graphql', csrf_exempt(GraphQLView.as_view())), url(r'^api/graphiql', csrf_exempt(GraphQLView.as_view(graphiql=True, pretty=True))), 

新しいアプリケーションを設定に追加します。

 INSTALLED_APPS = ( # ...    'api', 'blog', 'graphene_django', ) 

変更をコミットします。

 python manage.py makemigrations python manage.py migrate 

すべてが正しく行われ、エラーが表示されない場合は、ローカルサーバーを起動します。

 python manage.py runserver 

新しいブログ投稿を作成します。

• http：// localhost：8000 / admin /のwagtail管理パネルに移動します。
• メニューを使用して、[ エクスプローラ ] > [ホームページ ]に移動し、[ 子ページの追加 ] をクリック
• 新しいBlogPageタイプページを追加
• すべてのフィールドに入力します
• 新しいページを保存して公開します。

GraphQLのテスト：

http：// localhost：8000 / api / graphiqlに移動し、次のクエリを実行します。

 query articles { articles { id title date intro body } } 

次のようなものが表示されるはずです。



さらに、すでにGraphQLを使用して、Reactまたはサイトの他のコンポーネントとの対話を実装できます。