建议和反馈

请填写你的反馈内容

使用React.JS和GraphQL的动态博客

2019-10-01 ·3729次阅读 ·读完需要1分钟


在本教程中,我们将向您展示如何使用React,GraphQL和Cosmic JS创建一个简单的博客。这将是建立在现代技术堆栈之上的最快,最轻量的博客。

学习目标

本食谱介绍如何使用:


•GraphQL 

•如何为动态路由安装下一个路由

•用于我们的服务器端Web应用程序框架的Express.js。

•Next.js作为我们的React Universal框架。

•Axios,用于我们基于承诺的HTTP客户端,以将内容从Cosmic JS GraphQL API获取。

先决条件

•本地安装了Node.js 

•确保全局安装了yarn 

•您应该了解JavaScript和GraphQL

Steps

Make sure that you have Node.js and NPM installed on your machine, if not, visit the Node.js website to install the latest version.

Let’s start by creating a folder for our app. In your favorite terminal run the following commands:

mkdir simple-react-blog

cd simple-react-blog

Now let’s add a package.json file to import all of our dependencies for our app:

vim package.json

Add the following to our package.json file:


It’s a pretty light dependency list for a pretty light app. So what we will install is:

1. Axios for our promise-based HTTP client to get content from to the Cosmic JS GraphQL API.

2. Next.js as our React Universal framework.

3. Next routes for dynamic routes.

4. Express for our server-side web app framework.

5. React to handle our user interface.

Our scripts are necessary for starting our app in production and development.

Run the following command to install our dependencies:

npm i

Building Our Blog

Next, let’s begin building our blog pages. Create a pages folder and add the index.js file:

vim index.js

and add the following to 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 &&

}

 

)

})

}

)

}

}


here are a few things happening here:

1. We are importing our essential modules: Axios, Lodash, and other helpers and components.

2. We are pulling in some partials: Header and Footer.

3. We query the Cosmic JS GraphQL API to only return the stuff we need: _id, type_slug, slug, title, metadata and created_at.

4. We set the main props in our component to the `cosmic` object. And use lodash to parse through Posts and Global Object types.

5. We return our posts array data and image URLs into our main blog feed.

Single Post Query

For our single post, we add a `post` property to our props. Post is found by matching the query.slug to the Object slug:

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)

})

}


Conclusion

This is the simple Blog app created with React and GraphQL. We have also used some libraries like next.js and express.


评论(0)问答(0)
请先登录或注册

请先登陆或注册

相关推荐

从 MyEtherWallet 被攻击事件我们应该学到什么?

世界上著名的WEB钱包MyEtherWallet.com 遭遇了历史上首次大规模针对WEB钱包的中间人攻击,攻击时间只有2小时,总共超过价值15万美金的加密数字资产被窃取。我们相信,本次攻击只是一次试......
VeelDiana · 2020-06-04
1281阅读 · 0赞赏 · 0问答

Reddit的首次代币发行:对以太坊意味着什么?

不久前蓝狐笔记谈到Reddit基于以太坊推出其社区代币的计划,而这两天事情已经有了进展。Reddit已经开始准备发行两个子板块社区代币。目前它们正在Beta测试中,这些代币已在以太坊Rinkeby测试......
moondesign · 2020-06-02
1628阅读 · 0赞赏 · 0问答

引介 | 什么是以太坊 2.0 测试网?如何参与?

一. 什么是以太坊 2.0 测试网?所谓 “以太坊 2.0 测试网”,指的是在以太坊 2.0 正式启动以前,为测试技术标准(spec)的安全性、各客户端实现的可靠性以及客户端之间的互通性而推出的、可以......
古风 · 2020-06-02
2631阅读 · 0赞赏 · 0问答

区块链技术:以太坊2.0技术分享

01以太坊的发展之路这是一张2019年的以太坊路线图,我们看到从2013年底,以太坊创始人Vitalik Buterin发布了以太坊初版白皮书,启动了项目,到现在已经不知不觉走过了6个年头。2014年......
三地 · 2020-06-02
1640阅读 · 0赞赏 · 0问答

使用 CLion IDE 开发新项目

新建项目新建文件夹目录如下:hello|__ src //文件夹|__ include //文件夹|__ Toolchain.cmake //拷贝过来|__ CMakeLists.txt //拷贝过来......
moondesign · 2020-06-01
1170阅读 · 0赞赏 · 0问答

论DeFi协议的分叉

随着一批一层区块链将要上线,我一直在思考以太坊的网络效应,以及基于以太坊DeFi协议的护城河(defensibility)。几年前,我写了一篇关于非主权一层网络货币(如比特币和以太坊)网络效应的文章。......
波bobo · 2020-06-01
1238阅读 · 0赞赏 · 0问答

Diva

2304

LK币

2

粉丝

37

笔记

感谢"Diva"

这篇精彩的笔记,目前已经帮助

  • 0
  • 3
  • 7
  • 2
  • 9
喜欢0
链客社群 加入

微博进入

商务合作>

广告投放>

公司名称:北京链客行科技有限公司

联系方式:010-67707199

ICP备案号:京ICP备18032136号

Copyright:链客区块链技术问答社区 版权所有

感谢您的提问,问题被社区永久收入以便新人查看。一定要记得采纳最佳答案哦!加油!

感谢您的善举,每一次解答会成为新人的灯塔,回答被采纳后获得20算力和相应的LK币奖励

您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!

您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!