Рубрики
Без рубрики

Как построить простой блог, используя raction и graphql

В этом руководстве я собираюсь показать вам, как создать простой блог, используя React, GraphQL и [COSMIC JS] (https://cosmicjs.com). Это будет самый быстрый и самый светлый блог, построенный на современном стеке технологий.

Автор оригинала: Tony Spiro.

В этом руководстве я собираюсь показать вам, как создать простой блог, используя raction, graphql и Космические JS Отказ Это будет самый быстрый и самый светлый блог, построенный на современном стеке технологий. Давайте начнем.

TL; доктор

Посмотреть демонстрацию Установите простой в блоге RACT на Cosmic JS Просмотр кодовой базы на GitHub

Начиная

Убедитесь, что у вас есть Node.js и NPM, установленные на вашем компьютере, если нет, посетите веб-сайт Node.js для установки последней версии.

Давайте начнем с создания папки для нашего приложения. В вашем любимом терминале запустите следующие команды:

mkdir simple-react-blog
cd simple-react-blog

Теперь давайте добавим файл Package.json для импорта всех наших зависимостей для нашего приложения:

vim package.json.

Добавьте следующее в наш файл Package.json:

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next build; NODE_ENV=production node server.js"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "express": "^4.16.2",
    "lodash": "^4.17.4",
    "next": "^4.0.3",
    "next-routes": "^1.1.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}

Это довольно светлый список зависимостей для довольно легкого приложения. Так что мы будем устанавливать:

  1. Axios для нашего HTTP-клиента на основе обещания, чтобы получить контент от API Cosmic JS GraphQL.
  2. Next.js как наша реактивная универсальная структура.
  3. Следующие маршруты для динамических маршрутов.
  4. Экспресс для нашей серверной веб-структуры приложения.
  5. Реагируйте на наш пользовательский интерфейс.

Наши сценарии необходимы для начала нашего приложения в производстве и развитии.

Запустите следующую команду для установки наших зависимостей:

NPM I.

Создание нашего блога

Далее давайте начнем строить наши страницы блога. Создайте папку страниц и добавьте файл index.js:

import axios from 'axios'
import _ from 'lodash'
import Footer from './partials/footer'
import Header from './partials/header'
import helpers from '../helpers'
import config from '../config'

export default class extends React.Component {
  static async getInitialProps({ req }) {
    const query = `{
      objects(bucket_slug: "${config.bucket.slug}") {
        _id
        type_slug
        slug
        title
        metadata
        created_at
      }
    }`
    return await axios.post(`https://graphql.cosmicjs.com/v1`, { query })
    .then(function (response) {
      return {
        cosmic: {
          posts: _.filter(response.data.data.objects, { type_slug: 'posts' }),
          global: _.keyBy(_.filter(response.data.data.objects, { type_slug: 'globals' }), 'slug')
        }
      }
    })
    .catch(function (error) {
      console.log(error)
    })
  }
  render() {
    if (!this.props.cosmic)
      return 
Loading...

    return (
      

        

        

          {
            this.props.cosmic.posts &&
            this.props.cosmic.posts.map(post => {
              const friendly_date = helpers.friendlyDate(new Date(post.created_at))
              post.friendly_date = friendly_date.month + ' ' + friendly_date.date
              return (
                 

                  {
                    post.metadata.hero.imgix_url &&
                    
                  }
                  
                
  
              )
            })
          }
        

        

      

    )
  }
}

Есть несколько вещей, происходящих здесь:

  1. Мы импортируем наши основные модули: Axios, Lodash и другие помощники и компоненты.
  2. Мы тянуемся в некоторые частичные: заголовок и нижний колонтитул, вы можете ссылаться на эти частицы из кодовой базы на GitHub.
  3. Мы запрашиваем API COSMIC JS GraphQL, чтобы вернуть материал, которые нам нужны: _id, type_slug, slug, title, metadata и create_at.
  4. Мы устанавливаем основные реквизиты в нашем компоненте для Космический объект. И используйте Lodash для анализа постов и глобальных типов объектов.
  5. Мы возвращаем наши сообщения массива данных и URL-адреса изображений в наш основной подачу блога.

Одиночный запрос

Для нашего единственного поста мы добавляем пост свойство нашему реквизиту. Пост найден путем сопоставления запроса.

const gql_query = `{
  objects(bucket_slug: "${config.bucket.slug}") {
    type_slug
    slug
    title
    content
    metadata
    created_at
  }
}`
return await axios.post(`https://graphql.cosmicjs.com/v1`, { query: gql_query })
.then(function (response) {
  return {
    cosmic: {
      posts: _.filter(response.data.data.objects, { type_slug: 'posts' }),
      global: _.keyBy(_.filter(response.data.data.objects, { type_slug: 'globals' }), 'slug'),
      post: _.find(response.data.data.objects, { slug: query.slug }),
    }
  }
})
.catch(function (error) {
  console.log(error)
})
}

Проверьте полный файл на GitHub

Заключение

Это сокращенная версия простого вступающего в блоге RACT RACT, доступна для загрузки в странице Cosmic JS Apps. Полная кодовая база включает в себя одну просмотр страницы после публикации, а также страницу, посвященную для каждого автора. Просмотрите полную кодовую базу на GitHub и разверните это приложение за несколько кликов от Dashboard Cosmic JS, устанавливая приложение к ведрю Cosmic JS.

Я надеюсь, что вам понравилось это руководство, если у вас есть какие-либо вопросы Обратитесь к нам в Twitter и Присоединяйтесь к нашему сообществу на Slack Отказ

Читайте ещё по теме: