- PVSM.RU - https://www.pvsm.ru -
Если у вас появилась потребность добавить React в Wagtail CMS, да еще и с использованием GraphQL, то это руководство должно помочь вам в этом.
Это перевод статьи [1] из официального блога Wagtail, автор Brent Clark.
Возможность интегрировать Wagtail CMS (Django) с существующими моделями сайта на уровне GraphQL означает, что мы могли бы использовать наши существующие вызовы API внутри статей блога используя немного больше, чем ForeignKey и небольшой преобразователь.
Требуется:
Начнем создание стандартного блога:
Добавьте приложение для блога:
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 [3]
Примечание: Это решение универсальное для многих Django проектов благодаря пакету «Graphene-django»
Установите Graphene:
pip install "graphene-django==1.2"
Настройка Graphene:
Добавьте параметр GRAPHENE в base.py
GRAPHENE = {
'SCHEMA': 'api.schema.schema',
}
Добавьте приложение API:
Создайте в корневой папке сайта mysite, папку с названием api
Добавить apps.py
Создайте файл apps.py внутри новой папки api и вставьте туда следующее:
from django.apps import AppConfig
class ApiConfig(AppConfig):
name = 'api'
Добавить schema.py
Создайте еще один файл schema.py внутри папки api с указанным ниже содержимым:
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-адресов
Добавьте два новых импорта в ваш urls.py файл.
from django.views.decorators.csrf import csrf_exempt
from graphene_django.views import GraphQLView
Добавьте два новых URL-адреса в ваш urls.py файл, чуть выше адресов Wagtail.
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
Создайте новую запись в блоге:
Тестирование GraphQL:
Перейдите в http://localhost:8000/api/graphiql [5] и выполните запрос показанный ниже:
query articles {
articles {
id
title
date
intro
body
}
}
Вы должны увидеть, что-то подобное:
Дальше вы уже можете использовать GraphQL для реализации взаимодействия с React или любым другим компонентом вашего сайта.
Автор: Александр
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/python/261893
Ссылки в тексте:
[1] статьи: https://wagtail.io/blog/getting-started-with-wagtail-and-graphql/
[2] Руководство по установке: http://docs.wagtail.io/en/v1.11.1/getting_started/index.html
[3] Graphene: http://graphene-python.org/
[4] http://localhost:8000/admin/: http://localhost:8000/admin/
[5] http://localhost:8000/api/graphiql: http://localhost:8000/api/graphiql
[6] Источник: https://habrahabr.ru/post/335128/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.