GraphQLAPI在前端React应用中的集成与实践

### GraphQL API在前端React应用中的集成与实践 #### 1. 测试GraphQL突变API 首先，我们需要读取`ctx`变量中传入的参数，并将其传递给解析器函数。之后，我们要推送更改并测试GraphQL突变API，操作步骤如下： ```bash amplify push ``` 接着，在浏览器中导航到GraphQL API控制台，尝试执行突变查询。成功创建新项后，再次执行获取所有项的查询，此时应该能收到三项数据。 #### 2. 通过ID更新项 - 突变查询 我们要创建一个新的突变查询，用于根据项的ID更新其状态（布尔值）。具体操作如下： - **修改GraphQL模式**： ```graphql type Mutation { addItem(title: String!, done: Boolean!): Todo! @function(name: "todosfunctiongql-${env}") updateItem(id: ID!, done: Boolean!): Todo! @function(name: "todosfunctiongql-${env}") } ``` - **修改解析器函数**： ```javascript const updateItem = (id, done) => { const itemIndex = listOfTodos.findIndex((item) => item.id === Number(id)); if (itemIndex > 0) { listOfTodos[itemIndex] = { ...listOfTodos[itemIndex], done, }; return listOfTodos[itemIndex]; } else { throw new Error("Id not found"); } }; const resolvers = { Query: { todos: (ctx) => listOfTodos, }, Mutation: { addItem: (ctx) => addNewItem(ctx.arguments.title, ctx.arguments.done), updateItem: (ctx) => updateItem(ctx.arguments.id, ctx.arguments.done), }, }; ``` 这里需要注意，`id`的类型从数字变为了字符串，所以使用`Number`关键字将其转换为数字类型进行比较。也可以使用`==`运算符忽略类型进行比较。 将更改推送到Amplify并在AWS控制台中测试GraphQL API。先测试负面场景，传入一个不存在的随机ID，应该会返回错误；再传入正确的ID更新值，若能正常更新，则说明更新GraphQL查询正常工作。 #### 3. 删除项 - 突变查询 我们要编写一个突变查询，根据ID从列表中删除项。操作步骤如下： - **修改GraphQL模式**： ```graphql type Mutation { deleteItem(id: ID!): Boolean! @function(name: "todosfunctiongql-${env}") } ``` - **在Lambda函数解析器中添加相应字段**： ```javascript const deleteItem = (id) => { const itemIndex = listOfTodos.findIndex((item) => item.id === Number(id)); if (itemIndex >= 0) { listOfTodos.splice(itemIndex, 1); return true; } else { throw new Error("Id not found"); } }; const resolvers = { Query: { todos: (ctx) => listOfTodos, }, Mutation: { addItem: (ctx) => addNewItem(ctx.arguments.title, ctx.arguments.done), updateItem: (ctx) => updateItem(ctx.arguments.id, ctx.arguments.done), deleteItem: (ctx) => deleteItem(ctx.arguments.id), }, }; ``` 将更改推送到AWS并在控制台中测试GraphQL API。执行删除查询，API应返回布尔值`true`，再次获取所有待办事项，应该少了刚刚删除的项。 #### 4. 在React中集成GraphQL API API是客户端应用和服务器之间的通信方式，REST和GraphQL的主要区别在于数据请求和服务器响应的方式。REST中客户端指定端点，服务器返回该端点的所有数据；GraphQL中客户端使用查询语言指定所需数据，服务器仅返回请求的数据。 我们已经有了待办应用所需的GraphQL API，接下来要将其集成到React应用中。首先修改React钩子，从调用获取所有REST API改为调用GraphQL查询： ```javascript useEffect(() => ```