-Поиск по дневнику

Поиск сообщений в rss_rss_hh_new

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 17.03.2011
Записей:
Комментариев:
Написано: 51


[Перевод] Начало работы с Wagtail и GraphQL

Вторник, 08 Августа 2017 г. 06:05 + в цитатник
Если у вас появилась потребность добавить React в Wagtail CMS, да еще и с использованием GraphQL, то это руководство должно помочь вам в этом.

image

Это перевод статьи из официального блога Wagtail, автор Brent Clark.


Возможность интегрировать Wagtail CMS с существующими моделями сайта на уровне 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 и GraphQL используем Graphene

Установите 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


Создайте новую запись в блоге:

  • Зайдите в панель администратора wagtail по адресу http://localhost:8000/admin/.
  • Используя меню, перейдите к Explorer > Home Page и нажмите Add Child Page
  • Добавить новую страницу типа BlogPage
  • Заполните все поля
  • Сохраните и опубликуйте новую страницу.


Тестирование GraphQL:

Перейдите в http://localhost:8000/api/graphiql и выполните запрос показанный ниже:

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


Вы должны увидеть, что-то подобное:
image

Дальше вы уже можете использовать GraphQL для реализации взаимодействия с React или любым другим компонентом вашего сайта.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/335128/

Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку