React快速入门GraphQL，构建高效应用程序

前端

2024-02-20 16:29:27

好的，以下是关于React快速入门GraphQL的文章。

React快速入门GraphQL

GraphQL是一种用于API查询的查询语言，可让您从单一入口点请求所需的数据。GraphQL与REST API不同，后者要求您为每个资源执行单独的请求。GraphQL允许您一次请求多个资源，并以所需格式返回数据。

前提条件

Node.js v12或更高版本
npm v6或更高版本
React v16或更高版本
AWS账户

安装依赖项

首先，我们需要安装必要的依赖项。

npm install create-react-app
npm install apollo-client apollo-boost

创建React项目

现在，让我们创建一个新的React项目。

npx create-react-app my-app
cd my-app

初始化GraphQL客户端

接下来，我们需要初始化GraphQL客户端。

npm install graphql

配置GraphQL客户端

现在，我们需要配置GraphQL客户端。在src/index.js文件中，添加以下代码：

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import App from "./App";

const client = new ApolloClient({
  uri: "https://your-graphql-endpoint.com/graphql",
});

const AppWithApollo = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

export default AppWithApollo;

查询GraphQL API

现在，我们可以开始查询GraphQL API了。在src/App.js文件中，添加以下代码：

import React, { useState } from "react";
import { gql } from "apollo-boost";
import { Query } from "react-apollo";

const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      title
      completed
    }
  }
`;

const App = () => {
  const [todos, setTodos] = useState([]);

  return (
    <Query query={GET_TODOS} onCompleted={(data) => setTodos(data.todos)}>
      {({ loading, error }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;

        return (
          <ul>
            {todos.map((todo) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
        );
      }}
    </Query>
  );
};

export default App;