7、React与GraphQL：从基础实现到Apollo客户端的使用

React与GraphQL：从基础实现到Apollo客户端的使用

1. React中GraphQL突变的实现

在React中使用GraphQL时，除了获取数据（查询），还需要进行数据的写入操作，这就涉及到GraphQL突变（mutation）。下面将详细介绍如何在React应用中实现GitHub的 addStar 突变。

1.1 查询额外信息

在实现突变之前，需要查询关于仓库的额外信息，特别是 viewerHasStarred 字段和 id 字段。 viewerHasStarred 用于判断用户是否已经为仓库加星， id 用于明确突变的目标仓库。

const GET_ISSUES_OF_REPOSITORY = `
query (
  $organization: String!,
  $repository: String!,
  $cursor: String
) {
  organization(login: $organization) {
    name
    url
    repository(name: $repository) {
      id
      name
      url
      viewerHasStarred
      issues(first: 5, after: $cursor, states: [OPEN]) {
        ...
      }
    }
  }
}
`;
<