Skip to content

前端应该知道的GraphQL #10

Open
@wusb

Description

@wusb
Owner

作为一个程序员,搭建一个个人博客几乎是所有人的需求,一来比较酷,二来也可以记录自己的学习和生活总结。但如果你不是全栈工程师,实现这个需求还是有点麻烦。后端搭建一套现有的前端框架及前端写API都还是有一定门槛的,当然,如果你是大牛当我没说,哈哈哈!

下面,我将介绍一个特别简单的方法,甚至不用写代码,执行几个命令就可以搭建一个博客,就算你不是程序员,也是So easy。那就是:fork我的博客。为什么说fork我的博客就可以搭建一个博客呢?博客重要的是有内容,并且可以随时更新,而不是一个静态页。这就要用到本文的核心:GitHub GraphQL API,这是github提供的一个开放式的API。我们只需要将文章用Markdown写好后,放到博客项目Issues里面,然后通过这个api,获取我们的写的文章,再前端渲染,就可以啦!!是不是特别棒,都不要写API,也不用考虑文章存哪。下面我来介绍如何实现:

获取access token

请求GitHub GraphQL API,首先需要按照以下步骤在github申请一个access token:

右上角个人头像 > Settings > Developer settings > Personal access tokens > Generate new token

然后在Token description 写好关于这个token的描述,在Select scopes选择相应的权限,这里只需要user > read:user 就可以,点击Generate token按钮后会跳转到token列表页,这时需要马上把这个token记录下来,因为这是敏感数据,刷新后就没有了,不然得重新申请。

项目搭建

建议大家直接Fork我的项目 simbawus/blog,再修改相应配置,这样可以免去开发的成本,并且这个项目会持续更新,配置修改及启动可查看我项目的README。当然也可以fork后进行二次开发。也十分鼓励大家从零开始开发,也顺便练练手。

获取GraphQL API数据

关于GraphQL的介绍,可查看我些的这篇文章前端应该知道的GraphQL

GitHub GraphQL API的文档并没有使用示例,如果之前没用过GraphQL API,还是有点懵的,下面我举三个常见的例子说明下,具体可以看我博客代码,别忘了Star噢~。

获取标签及相关issues

通常,我们会在博客首页设计一个有分类的文章列表,这就要求在发布Issue时需要选择对应的label。先看官方label文档

Connections 里面有issues,所以在查询labels的同时,还可以查询issues。先列出要传输的数据data,核心也在这:

data = {
  query: `query {
    repository(owner:"simbawus", name: "blog") {
      issues(orderBy:{field: UPDATED_AT, direction: DESC} , labels: null, first: 10, after: ${page}) {
        edges{
          cursor
          node{
            title
            updatedAt
            bodyText
            number
          }
        }
      }
      labels(first: 100){
        nodes{
          name
        }
      }
    }
  }`
};

repository代表查询指定的仓库,括号里的参数owner代表这个仓库的所有者,name代表仓库名称。issues表示要查询的issue列表,里面的参数表示这个列表的条件:orderBy为排序方式,根据更新时间UPDATED_AT和倒序DESC来,labels为null,说明查询的是所有issues,first表示一次查询返回的issues数量,after传上一个issue的id,可用来分页,最终这次请求拿到的数据结构如下,完整的请浏览器查看:

{
  "data": {
    "repository": {
      "issues": {
        "edges": {
          "0": {
            "cursor": "Y3Vyc29yOnYyOpK5MjAxOC0wNC0yNlQxMDoyNjoxNiswODowMM4S8hYL",
            "node": {
              "bodyText": "作为一个程序员...",
              "number": "11",
              "title": "如何利用GitHub GraphQL API开发个人博客?",
              "updatedAt": "2018-04-22T03:46:34Z",
            }
          }
        }
      },
      "labels": {
        "nodes": {
          "0": {
            "name": "JavaScript"
          }
        }
      }
    }
  }
}

搜索

search这个connections的文档写的让我一脸懵逼,摸索了好久才写出来,大家可以试着按官网文档写一下。

let data = {
  query: `query {
      search(query:"${keyWords} repo:simbawus/blog", type: ISSUE, first: 10) {
        issueCount
        edges{
          cursor
          node{
            ... on Issue {
              title
              number
              bodyText
              updatedAt
            }
          }
        }
      }
    }`
};

search的query参数类型为String!,表示一个非空的字符串,怎么也想不到要这么写才行吧?query:"${keyWords} repo:simbawus/blog"。node 这个fields的文档,看的也是二脸懵逼,还好想到es6的扩展符。

详情

最重要的是文章内容这部分了,传输数据比较简单:

let data = {
  query: `query {
    repository(owner:"simbawus", name: "blog") {
      issue(number: ${articleId}) {
        title
        updatedAt
        bodyHTML
      }
    }
  }`
};

请求直接返回一段HTML,问题是如何处理这段HTML,格式化并且高亮文章里面的代码。这里我用的是React的dangerouslySetInnerHTML和github的css库github-markdown-css,核心代码如下:

import 'github-markdown-css';
class ArticlePage extends React.Component {
  _renderHTML() {
    return { __html: this.state.bodyHTML };
  }
  render() {
    return ( 
      <div  className = 'markdown-body'
            dangerouslySetInnerHTML = { this._renderHTML() } >
      </div>
    );
  }
}

结合GitHub GraphQL API开发个人博客的核心内容基本就这么多了,具体代码欢迎查看github:simbawus/blog,一起踩坑。

欢迎讨论,点个赞再走吧~

文章同步于以下社区,可以选一个关注我噢 。◕‿◕。

simbawu | github | segmentfault | 知乎 | 简书 | 掘金

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wusb

        Issue actions

          前端应该知道的GraphQL · Issue #10 · wusb/blog