如何在 GraphQL 中使用时间与日期

对于前端开发者来说，处理时间和日期是非常常见的任务。而对于使用 GraphQL 的开发者来说，了解如何在 GraphQL 中使用时间和日期非常重要。

在 GraphQL 中处理时间和日期需要使用一个叫做 Scalar 的类型。Scalar 类型可以让你在 GraphQL 中描述基本类型，例如字符串、数字和日期。GraphQL 本身提供了几种内置的 Scalar 类型，例如 String、Int、Float 和 Boolean。但是，日期和时间并不是内置的 Scalar 类型，因此我们需要自己定义。

定义日期与时间

我们可以使用 GraphQLISODateTime 来定义日期和时间。它是 graphql-scalars 库中的 Scalar 类型，可以处理各种时区和时间格式。

下面是如何在 GraphQL 中定义日期和时间：

scalar Date

scalar Time

scalar DateTime

在上面的代码中，我们定义了三个 Scalar 类型：Date、Time 和 DateTime。这些类型可以用来处理日期和时间。

在 GraphQL 查询中使用日期与时间

当我们定义了日期和时间类型之后，我们可以在 GraphQL 查询中使用它们。

例如，以下是一个查询任务列表的 GraphQL 查询：

// www.javascriptcn.com code example
query {
  tasks {
    id
    title
    description
    created_date
    due_date
  }
}

在上面的查询中，我们想要返回一个任务列表，其中每个任务包含一个 created_date 和一个 due_date。这两个字段都是日期类型。

我们可以通过以下方式来处理这些日期字段：

// www.javascriptcn.com code example
type Task {
  id: ID!
  title: String!
  description: String
  created_date: Date!
  due_date: Date!
}

type Query {
  tasks: [Task!]!
}

在上面的代码中，我们将 created_date 和 due_date 定义为 Date Scalar 类型。接着，我们定义了一个 Task 类型，其中包含了这两个日期字段。

在 GraphQL Mutation 中使用日期与时间

在 GraphQL Mutation 中，处理日期和时间跟处理查询中的日期和时间是一样的。

例如，以下是一个添加任务的 GraphQL Mutation：

// www.javascriptcn.com code example
mutation {
  addTask(title: "新的任务", description: "新的任务描述", created_date: "2022-01-01T00:00:00.000Z", due_date: "2022-01-31T23:59:59.999Z") {
    id
    title
    description
    created_date
    due_date
  }
}

在上面的 Mutation 中，我们向任务列表中添加一个新的任务，并且指定了这个任务的 created_date 和 due_date。这两个字段都是日期类型。

我们可以通过以下方式来处理这些日期字段：

// www.javascriptcn.com code example
type Mutation {
  addTask(title: String!, description: String, created_date: Date!, due_date: Date!): Task!
}

type Task {
  id: ID!
  title: String!
  description: String
  created_date: Date!
  due_date: Date!
}

在上面的代码中，我们将 created_date 和 due_date 定义为 Date Scalar 类型。我们也将这些日期字段添加到了 addTask Mutation 的参数中。

使用 GraphQLISODateTime Scalar 类型的示例代码

让我们看一下如何使用 GraphQLISODateTime Scalar 类型来处理日期和时间。我们将编写一个查询当前时间的 GraphQL 查询。

// www.javascriptcn.com code example
const { ApolloServer, gql } = require('apollo-server');
const { GraphQLISODateTime } = require('graphql-scalars');

const typeDefs = gql`
  scalar DateTime

  type Query {
    currentTime: DateTime!
  }
`;

const resolvers = {
  DateTime: GraphQLISODateTime,

  Query: {
    currentTime: () => new Date(),
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

在上面的代码中，我们安装了 graphql-scalars 包，然后定义了一个 DateTime Scalar 类型。我们定义了一个包含 currentTime 查询的 Query 类型。当我们调用 currentTime 查询时，它会返回当前时间。

然后，我们创建了一个 ApolloServer，并将 GraphQLISODateTime 指定为 DateTime Scalar 类型的解析器。最后在这个服务器上监听请求并输出服务器的 URL。

通过以上示例，我们可以学习到如何在 GraphQL 中使用日期与时间，并且了解到使用 Scalar 类型可以简化这一过程。同时，通过学习 GraphQLISODateTime，我们可以了解到，为了使用其他自定义 Scalar 类型，我们需要了解它的解析器实现方式。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6358ea941bf7134be5fe5