graphql - Apollo GraphQL 中的命令式是什么意思？

Question

我是 Apollo GraphQL 的新手。在阅读它的文档时，它多次提到 imperative 这个词。但我真的无法在网上找到一个解释来阐明“命令式”对 Apollo GraphQL 究竟做了什么。到目前为止，最简单的定义。我得到的是 命令式编程就像你做某事的方式，而声明式编程更像是你所做的。

下面是一个为 Apollo GraphQL 提及命令式的例子:

GraphQL’s mutations are triggered imperatively, but that’s only because a HOC or render prop grants access to the function which executes the mutation (e.g. on a button click). With Apollo, the mutations and queries become declarative over imperative.

谁能提供一个可靠的例子来帮助我理解 Apollo GraphQL 中命令式的含义？

Answer 1

这实际上是一个比你意识到的更简单的段落，在这句话中，命令式解释了一个人可能如何选择将 graphql react 组件写成:

import React from 'react';
import { Query } from 'react-apollo';

const Profile = () => (
  <Query query={}>
    {() => <div>My Profile</div>}
  </Query>
);

export default Profile;

虽然这个组件实际上并没有进行查询，因为我们没有提供查询，但我们正在对它进行命令式编程。从某种意义上说，我们正在向组件提供查询，并且 HOC 触发查询或突变并将其传递给 Prop 。在这个例子中，我们可以逐步完成从创建 HOC 和添加查询到通过组件上的 props 调用它的代码。值得注意的是，GraphQL 查询自身本质上是声明性的。

声明式的最佳特征是描述我们想要什么，而在 apollo 客户端中，最好的可视化方式是通过功能组件。

const LAST_LAUNCH = gql`
  query lastLaunch {
    launch {
      id
      timestamp
    }
  }
`;

export function LastLaunch() {
  const { loading, data } = useQuery(LAST_LAUNCH);
  return (
    <div>
      <h1>Last Launch</h1>
      {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}
    </div>
  );
}

在这个例子中你可以看到我们实际上是在使用

执行这个查询/突变

const { loading, data } = useQuery(LAST_LAUNCH);

这行代码使用上面编写的查询描述了我们希望返回的内容，使其成为声明性语句。

用简单的术语来说，示例一中的 HOC 组件有几个步骤，您可以在使用数据之前执行这些步骤。在第二个示例中，我们只是简单地在一条语句中描述我们想要的内容并接收回数据。

最后，同样重要的是，在编程中，我们通常在整个应用程序中混合使用命令式和声明式语句/代码块，这是完全正常的。