GraphQL允许我们定义一个查询来提供一个通用的接口在客户端和服务端之间来请求和处理数据。
请确认在你的机器上安装了node.js和Npm。如果没有请到node官网下载安装安装，然后我们继续。
首先创建app的文件夹。如果你也喜欢使用终端命令行，可以使用如下的命令：
Mkdirsimple-react-blog
Cdsimple-react-blog
接下来，我们添加一个叫package.json的文件到当前文件夹，用来引用当前app需要的文件依赖：
Vimpackage.json
请添加如下内容，
{{
"scripts":{
"dev":"nodeserver.js",
"build":"nextbuild",
"start":"nextbuild;NODE_ENV=productionnodeserver.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"
}}
多么完美的依赖。来看看，我们都用了那些插件：
Axios是一个promised式的HTTP客户端，用来和graphql以及cosmic.js通信。
Next.js是一个我们通用react框架。
Nextroutes是一个动态路由。
Express是一个服务端的框架。
React用来处理用户界面。
我们的脚本需要以上依赖运行和部署。运行以下命令安装上述的依赖：
Npmi
他等价于NPMINSTALL
构建我们的博客
下一步，我们来构建博客的页面，创建一个页面文件夹以及index.js文件。
Vimindex.js
添加如下代码到其中：
importaxiosfrom'axios'import_from'lodash'importFooter
from'./partials/footer'importHeaderfrom'./partials/header'import
helpersfrom'../helpers'importconfigfrom'../config'export
defaultclassextendsReact.Component{
staticasyncgetInitialProps({req}){
constquery=`{
objects(bucket_slug:"${config.bucket.slug}"){
_id
type_slug
slug
title
metadata
created_at
}
}`
returnawaitaxios.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)
returnLoading...return(
{
this.props.cosmic.posts&&
this.props.cosmic.posts.map(post=>{
constfriendly_date=
helpers.friendlyDate(newDate(post.created_at))
post.friendly_date=
friendly_date.month+''+friendly_date.date
return(
{
post.metadata.hero.imgix_url&&
}
{post.title}by{post.metadata.author.title}on{post.friendly_date}Readmore...
)
})
}
)
}}
以下兴奋的事情发生了。
1.我们导入了需要的模块：Axios，Lodash以及其他helpers和组件。
2.我们使用了partials推入，并如header头部和footer尾部版权部分。关于partials可以参考GitHub。
3.我们请求Comic.js以及grapthql，需要返回如下内容：
ID，typeslug，slug，title，metadata以及create at
4.我们设置主进程在我们的组件渲染到comic对象。我们使用lodash去解析posts和全局对象类型。
5.我们返回表单数组数据和图片URL到主博客feed流。
简单的表单查询
针对简单的查询，我们添加POST属性到props。Post是用来从博客文章的slug中查询匹配的内容。代码如下：
constgql_query=`{
objects(bucket_slug:"${config.bucket.slug}"){
type_slug
slug
title
content
metadata
created_at
}
}`returnawaitaxios.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上查询下载。
以上就是【上海昂立IT培训学校】小编努力整理出的内容，希望对大家的学习有所帮助哦。更多数据资讯信息请定期关注我们...
