您的第一个 React GraphQL 前端与 Apollo 客户端：简介

创建新的 React App

将 GraphQL 添加到 Apollo 客户端

查询 API

更新变量

结论

如果你正在将 React 前端与 GraphQL API 集成，不妨试试 Apollo 客户端！我发现它的连接非常简单。

在这篇文章中，我们将使用从头开始创建一个 React 项目create-react-app，添加 Apollo GraphQL 客户端，然后使用 SpaceX GraphQL API 在我们的应用程序中显示数据。

如果您想要更多有关 GraphQL 的介绍，请为这篇文章点赞💓、🦄 和 🔖！

创建新的 React App

我将使用yarn包管理器创建一个名为的新 React 应用react-with-apollo。当然，npm如果你愿意，也可以使用。



yarn create react-app react-with-apollo

我们可以cd进入该目录并运行yarn start以确保我们的默认 React 应用程序在端口 3000 上启动并运行。



cd react-with-apollo
yarn start

如果我们导航到http://localhost:3000，我们将得到如下内容：

将 GraphQL 添加到 Apollo 客户端

要将 GraphQL 与 Apollo 客户端一起使用，我们需要将它们都安装为项目依赖项。让我们使用 yarn 来完成。



yarn add graphql @apollo/client

接下来我们需要配置 Apollo 客户端。通常，这可能需要与 GraphQL 服务器进行身份验证，但由于 SpaceX API 是公开的，我们无需担心这一点。我们只需使用 GraphQL API 端点配置客户端即可。此外，我们还可以指定查询所需的任何缓存。在这个基本示例中，我们只进行一些内存缓存。

在这个例子中，我们将在文件中配置客户端index.js，并将其包装App在 Apollo 提供程序中。实际上，你应该将 Apollo 提供程序设置为所有需要从 GraphQL API 获取数据的组件的最低公共祖先。

索引.html



import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.spacex.land/graphql/',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

查询 API

现在，我们已经准备好查询 API 了！在我们的App.js文件中，让我们创建一个查询，获取 SpaceX 的所有任务信息，包括日期、发射地点和火箭。当然，由于这是 GraphQL，因此只需一个查询即可轻松获取所有这些信息。

我们将在查询中包含一个变量，numLaunches以便我们了解如何使用变量。

App.js



import { gql } from '@apollo/client';

const PAST_LAUNCHES = gql`
  query GetPastLaunces($numLaunches: Int!) {
    launchesPast(limit: $numLaunches) {
      mission_name
      launch_date_local
      launch_site {
        site_name_long
      }
      rocket {
        rocket_name
      }
    }
  }
`;

function App() {
  // TBD
}

现在到了集成 Apollo 客户端的部分。它有一个非常方便的useQuery钩子，可以帮我们做很多繁重的工作。基本上，我们传入刚刚定义的查询以及任何查询选项（在我们的例子中只是变量），钩子会返回一个loading布尔值（也可能是一个error对象），以及返回的data。



import { gql, useQuery } from '@apollo/client';

const PAST_LAUNCHES = gql`
  query GetPastLaunces($numLaunches: Int!) {
    launchesPast(limit: $numLaunches) {
      mission_name
      launch_date_local
      launch_site {
        site_name_long
      }
      rocket {
        rocket_name
      }
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(PAST_LAUNCHES, {
    variables: {
      numLaunches: 10,
    },
  });
}

在这里我们可以看到我们已经提供了我们的PAST_LAUNCHES查询以及我们现在numLaunches设置的参数。10

那么——让我们使用钩子返回的信息吧！由于我们现在才刚刚开始学习，所以我们会做一个非常简单的交互。如果loading是true，我们会向用户显示“正在加载……”的消息；如果error是真，我们会告诉用户出现了问题；否则，我们会将查询数据格式化为可读的形式。



import { gql, useQuery } from '@apollo/client';

const PAST_LAUNCHES = gql`
  query GetPastLaunces($numLaunches: Int!) {
    launchesPast(limit: $numLaunches) {
      mission_name
      launch_date_local
      launch_site {
        site_name_long
      }
      rocket {
        rocket_name
      }
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(PAST_LAUNCHES, {
    variables: {
      numLaunches: 10,
    },
  });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Oh no!</p>;
  }

  return (
    <ul>
      {data.launchesPast.map((launch) => (
        <li key={launch.mission_name}>
          <strong>{launch.mission_name}</strong>
          <ul>
            <li>
              Launch Date:{' '}
              {new Date(launch.launch_date_local).toLocaleDateString()}
            </li>
            <li>Rocket: {launch.rocket.rocket_name}</li>
            <li>Launch Site: {launch.launch_site.site_name_long}</li>
          </ul>
        </li>
      ))}
    </ul>
  );
}

export default App;

当然，我们的结构data与输入查询的结构完全相同；这是更有用的 GraphQL 功能之一！

让我们检查一下我们的网络应用程序，看看一切是否正常。

完美！看起来棒极了。

更新变量

在本文的最后一部分，我们将探讨更新变量后重新获取数据的难易程度。在这种情况下，我们可能需要不同的过去发射次数。

我们或许希望维护一个单独的numLaunches状态变量，当更新该变量时，useQuery钩子会再次触发。在下面的例子中，我们只需添加一个按钮，显示 5 次发射，而不是 10 次。虽然很简单，但你明白我的意思！



import { gql, useQuery } from '@apollo/client';
import { useState } from 'react';

const PAST_LAUNCHES = gql`
  query GetPastLaunces($numLaunches: Int!) {
    launchesPast(limit: $numLaunches) {
      mission_name
      launch_date_local
      launch_site {
        site_name_long
      }
      rocket {
        rocket_name
      }
    }
  }
`;

function App() {
  const [numLaunches, setNumLaunches] = useState(10);
  const { loading, error, data } = useQuery(PAST_LAUNCHES, {
    variables: {
      numLaunches,
    },
  });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Oh no!</p>;
  }

  return (
    <>
      <button onClick={() => setNumLaunches(5)}>Show 5</button>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.mission_name}>
            <strong>{launch.mission_name}</strong>
            <ul>
              <li>
                Launch Date:{' '}
                {new Date(launch.launch_date_local).toLocaleDateString()}
              </li>
              <li>Rocket: {launch.rocket.rocket_name}</li>
              <li>Launch Site: {launch.launch_site.site_name_long}</li>
            </ul>
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;

那么这有效吗？让我们测试一下。

当然！

结论

我非常喜欢 React 的 Apollo 客户端！它“简直好用”，并且提供了我在执行 GraphQL 查询时所需的响应式响应能力。希望这篇文章也能帮助你在 React 中开始使用 GraphQL！

文章来源：https://dev.to/nas5w/your-first-react-graphql-frontend-with-the-apollo-client-a-gentle-introduction-3o66

您的第一个 React GraphQL 前端与 Apollo 客户端：简介、创建新的 React 应用、添加 GraphQL 到 Apollo 客户端、查询 API、更新变量、总结

您的第一个 React GraphQL 前端与 Apollo 客户端：简介

创建新的 React App

将 GraphQL 添加到 Apollo 客户端

查询 API

更新变量

结论

如果您想要更多有关 GraphQL 的介绍，请为这篇文章点赞💓、🦄 和 🔖！

创建新的 React App

将 GraphQL 添加到 Apollo 客户端

查询 API

更新变量

结论