关于GraphQL

你可以在下面链接中查看GraphQL：
https://docs.github.com/en/graphql/overview/explorer

点击Prettify会删除注释或不必要的内容。

在檢查時，發現”fetchViewer”是查詢操作的名稱。

查詢fetchViewer {
viewer {
login
}
}

在请求的部分中，显示出了JSON数据。

虽然是同样的东西，但如果保持原样就会出错。
即使帐号不同，也不能以相同的方式提取数据。

{
  user(login: "business1") {
    bio
    login
  }
  user(login: "business2") {
    bio
    login
  }
}

因此，给它起一个别名（称为别名）
例如，可以使用user1和user2
如下所示。

{
  user1: user(login: "business1") {
    bio
    login
  }
  user2: user(login: "business2") {
    bio
    login
  }
}

在处理类似③中的共享字段，例如bio和login时，我们可以使用Fragment来以一种单一的方式进行描述。可以通过展开Fragment来实现。

{
  user1: user(login: "business1") {
    ...commonFields
  }
  user2: user(login: "business2") {
    ...commonFields
  }
}

fragment commonFields on User {
   bio
   login
}

当您在查询旁边添加操作名称时，您可以选择执行哪个查询。

query getUser1 {
  user(login: "businessryuya") {
    bio
  }
}

query getUser2 {
  user(login: "ryuyamatsuzawa") {
    bio
  }
}

如果您将变量(login:$login)作为查询变量输入，直接在查询后定义其类型即可。

⑦ 变异 yì)

在查询中，无法删除或更新数据。
而在变更中，可以实现这一步骤。
顺便说一下，像下面的叹号意味着必须的。
starrableId: ID!

在中文中，可以这样表达：

书写方式如下，首先通过查询（query）确认所需的信息，然后再创建变更（mutation）。

query repogitory{
  repository(owner: "gipcompany",name: "udemy-react-redux-crud-application") {
    id
    name
    url
  }
}

mutation addStar {
  addStar(input: {starrableId: "MDEwOlJlcG9zaXRvcnkxMjM5NTA3MjU="}) {
    starrable {
      id
      viewerHasStarred
    }
  }
}

⑧内联片段的意思是展开节点中的User。

query search {
  search(query: "we work hard", type:USER, first:2) {
    nodes {
     ... on User{
      id
      name
      url
    }
      ... on Organization{
      id
      name
      url
      projectsUrl
    } 
    }
  }
}

然而，如果不包含projectsUrl，就无法区分两者返回的结果是哪一个，因此需要使用__typename。使用它可以明确指定是哪一个结果。

翻页

以中文本地化方式解释掉Relay-style cursor pagination。
这种方式已经被 GitHub 採用。
在实际实现中被广泛采用。
以下是一个例子，类似这样的实现。
我是在参考文档的同时编写的。

query searchRepositories($first: Int, $after: String, $last:Int, $before:String,$query:String!) {
  search(first: $first, after:$after, last:$last, before:$before, query:$query,type: REPOSITORY) {
    repositoryCount
    pageInfo{
      endCursor
      hasNextPage
      hasPreviousPage
      startCursor
    }
    edges{
      cursor
      node{
        ... on Repository{
          id
          name
          url
        }
      }
    }
  }
}

以下是查询变量

{
  "after": null,
  "before": null,
  "first": 2,
  "last": null,
  "query": "フロントエンジニア"
}