在 GraphQL 中处理现实世界中的时间和日期

GraphQL 是一种用于 API 的查询语言，它使得客户端能够只请求所需的数据，从而减少了无用的数据传输。然而，在 GraphQL 中处理现实世界中的时间和日期可能会有一些挑战，特别是在不同的时区和语言环境中。

本文将向大家介绍如何在 GraphQL 中处理时间和日期，包括如何在 GraphQL schema 中定义和解析日期和时间类型、如何使用标准格式化和解析库来处理时间和日期、如何支持时区和语言环境，以及如何处理夏令时等问题。

定义和解析日期和时间类型

在 GraphQL schema 中定义日期和时间类型是很容易的。通常我们会使用标准的 ISO 格式（例如：YYYY-MM-DDTHH:mm:ss.sssZ）来表示日期和时间。以下是一个例子：

------ ----

---- ----- -
  --- ---
  ------ -------
  --------- -------
  ----- -----
-

---- ----- -
  ------- ---------
-

这里我们定义了一个 Date 标量类型，并将其用于 Event 中的 date 字段。然后我们可以在 resolver 中使用标准的 JavaScript Date 对象来解析和格式化日期。

以下是一个示例 resolver：

----- --------- - -
  ----- --- -------------------
    ----- -------
    ---------- ------- -- --------------------
    ----------- ------- -- --- ------------
    ------------- ----- -- -------- --- ----------- - --- --------------- - -----
  ---
  ------ -
    ------- -- -- -
      ------ -
        -
          --- ----
          ------ -------- --------
          --------- ---- ---------- ----
          ----- --- ---------------------------------
        --
        -
          --- ----
          ------ ------ ------------
          --------- ---- ----- ----
          ----- --- ---------------------------------
        --
      --
    --
  --
--

在这个示例中，我们使用了名为 Date 的 GraphQLScalarType，并在其 serialize、parseValue 和 parseLiteral 方法中定义了如何解析和格式化日期。在 resolver 中，我们返回了两个事件，它们的日期都是标准的 ISO 格式。

使用标准格式化和解析库

尽管在 JavaScript 中使用 Date 对象处理日期和时间是很容易的，但处理时区和语言环境可能会有很多麻烦。为了避免这些麻烦，我们可以使用标准的格式化和解析库来处理日期和时间。

以下是一些流行的库：

  • date-fns：适用于现代 JavaScript 的现代日期库。
  • Moment.js：处理、解析和显示日期和时间的库。
  • Luxon：一个轻量级的现代日期库，可以使用类似于 Moment.js 的 API。

以下是一个使用 date-fns 的示例：

------ - ---------- -------- - ---- -----------

----- --------- - -
  ----- --- -------------------
    ----- -------
    ---------- ------- -- -----------------
    ----------- ------- -- ----------------
    ------------- ----- -- -------- --- ----------- - ------------------- - -----
  ---
  ------ -
    ------- -- -- -
      ------ -
        -
          --- ----
          ------ -------- --------
          --------- ---- ---------- ----
          ----- -------------------------------------
        --
        -
          --- ----
          ------ ------ ------------
          --------- ---- ----- ----
          ----- -------------------------------------
        --
      --
    --
  --
--

在这个示例中，我们使用了 date-fns 的 formatISO 和 parseISO 函数来格式化和解析 ISO 格式的日期。我们也可以使用其他函数来处理时区和语言环境。

支持时区和语言环境

在现实世界中，多个国家和地区使用不同的时区和语言环境，因此在处理日期和时间时，我们需要支持这些差异。一种常见的方法是存储日期和时间的 UTC 格式，并在客户端或服务端中将其转换为所需的时区和语言环境。

以下是一个使用 moment.js 和 moment-timezone 的示例：

------ ------ ---- ------------------

----- --------- - -
  ----- --- -------------------
    ----- -------
    ---------- ------- - -------- -- -- ------------------------------------
    ----------- ------- -- -----------------------
    ------------- ----- -- -------- --- ----------- - -------------------------- - -----
  ---
  ------ -
    ------- -- -- -
      ------ -
        -
          --- ----
          ------ -------- --------
          --------- ---- ---------- ----
          ----- --- ---------------------------------
        --
        -
          --- ----
          ------ ------ ------------
          --------- ---- ----- ----
          ----- --- ---------------------------------
        --
      --
    --
  --
--

在这个示例中，我们使用了 moment-timezone 库中的 tz 函数来处理时区。我们还将时区作为 GraphQL resolver 的参数传递。在客户端中，我们可以使用同样的方式来处理时区和语言环境。

处理夏令时等问题

在处理日期和时间时，还需要考虑夏令时等问题。夏令时是一种用于节省日光的措施，但它使得时区在某些时间发生变化。在这种情况下，我们需要使用可靠的库来处理日期和时间。

以下是一个使用 moment-timezone 和 date-fns 的示例：

------ ------ ---- ------------------
------ - ---------- -------- - ---- -----------

----- --------- - -
  ----- --- -------------------
    ----- -------
    ---------- ------- - -------- -- --
      ---------------- ------------------------
    ----------- ------- -- -----------------------
    ------------- ----- -- -------- --- ----------- - -------------------------- - -----
  ---
  ------ -
    ------- -- -- -
      ----- ------ - -
        -
          --- ----
          ------ -------- --------
          --------- ---- ---------- ----
          ----- -------------------------------------
        --
        -
          --- ----
          ------ ------ ------------
          --------- ---- ----- ----
          ----- -------------------------------------
        --
      --

      ------ ------------------ -- -
        ----- ------- - --------------------- -------
        ----- ------- - ----------------------------------
        ----- ------------- - ----------------------------

        ------ - --------- ----- ------------- --
      ---
    --
  --
--

在这个示例中，我们使用了 moment-timezone 库中的 tz 函数来处理时区和夏令时问题，并使用了 date-fns 库中的格式化函数来格式化日期。我们还将日期表示为 UTC 时间，并将其转换为本地时间。最后，我们处理了夏令时问题，并返回了格式化好的日期。

总结

在 GraphQL 中处理日期和时间可能会有一些挑战，但我们可以使用标准的格式化和解析库来解决这些问题。为了支持多个时区和语言环境，我们可能需要将日期表示为 UTC 时间，并在客户端或服务端中将其转换为所需的时区和语言环境。在处理夏令时等问题时，我们需要使用可靠的库来处理日期和时间。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64808cb948841e9894fff173

阅读全文

猜你喜欢

  • 响应式设计中的表格布局问题及解决方法

    随着移动设备的普及，越来越多的用户使用移动设备访问网站。响应式设计可以帮助我们在各种屏幕大小和分辨率上提供一致的体验。在这种情况下，表格布局成为前端开发者需要解决的一个问题。

    1 年前
  • 在 React 项目中使用 TypeScript 的最佳实践

    随着前端技术的发展，React 和 TypeScript 成为当前比较流行的技术。React 是一个用于构建用户界面的库，而TypeScript 则是 JavaScript 的超集，它为 JavaSc...

    1 年前
  • ECMAScript 2020 中的新特性：让 JavaScript 编程更高效

    ECMAScript，简称 ES，是 JavaScript 的标准化语言规范，每年都会发布新的版本。2020 年发布的 ECMAScript 2020（ES2020）中含有一些值得关注的新特性，这些特...

    1 年前
  • 使用 Flexbox 实现弹性滑块布局

    在前端开发中，经常会使用到弹性布局来实现响应式页面。而 Flexbox 则是弹性布局中的一种流行布局方式，通过对元素的排列方式进行有力的控制，能够实现各种不同的页面布局需求。

    1 年前
  • ECMAScript 2018：正则表达式特性总结

    ECMAScript 2018：正则表达式特性总结 在 ECMAScript 2018 中，正则表达式得到了一些新的特性。这些新特性可以帮助开发人员更加轻松、高效地进行正则表达式匹配和替换操作。

    1 年前
  • Sequelize 之使用 Redis 实现缓存

    前言 Sequelize 是一个 Node.js 下的 ORM（Object-Relational Mapping）框架，它支持 MySQL、PostgreSQL、SQLite 和 Microsoft...

    1 年前
  • 常见问题：Serverless 架构出现内存泄露问题怎么解决？

    什么是 Serverless？ Serverless 是指构建和运行应用程序而无需像传统的服务器架构那样维护服务器基础设施。在 Serverless 架构中，应用程序的运行和管理交由云服务供应商来完成...

    1 年前
  • ES10 中新特性可选链的使用技巧

    随着 Web 应用程序的复杂度越来越高，开发者们需要一种方法来处理可能的空值和 undefined 错误。ES10 中新的可选链特性就提供了一种优雅的解决方案。本文将向大家介绍这个新特性的使用技巧。

    1 年前
  • 使用 Express.js 在 Node.js 中实现 Passport.js

    使用 Express.js 在 Node.js 中实现 Passport.js 随着 Web 应用程序的复杂性不断增加，授权和身份验证变得越来越重要。Passport.js 是一个流行的 Node.j...

    1 年前
  • 如何优雅地在 Vue 项目中引入第三方库？

    在开发 Vue 项目时，我们经常需要引入一些第三方库，比如 UI 库、工具库等。如何更好地管理和引入这些库呢？在本文中，我们将会介绍如何在 Vue 项目中优雅地引入第三方库，避免一些常见的问题和陷阱。

    1 年前
  • 如何在 Docker 容器中安装与使用 Apache Cassandra 数据库？

    Apache Cassandra 是一个广泛使用的分布式 NoSQL 数据库，它提供了高可用性、可扩展性和灵活性。在 Docker 容器中安装与使用 Apache Cassandra 数据库可以让我们...

    1 年前
  • 使用 Promise.any 避免多网络请求时的问题

    在前端开发中，经常会有需要发起多个网络请求的场景，例如在一次页面加载中需要获取多个 API 的数据。然而，这样的设计很容易带来一些问题，例如性能和用户体验问题。在这篇文章中，我们将介绍如何使用 Pro...

    1 年前
  • ES7 async/await 用法详解——解决开发者的痛点

    如果你是一名前端开发工程师，那么你一定了解异步编程的重要性。JavaScript 基于事件驱动（event-driven），这意味着你必须使用异步编程来处理网络请求和用户事件。

    1 年前
  • 如何使用 SSE 建立一个类似于聊天室的应用

    概述 SSE （Server-Sent Events）是一种用来实现服务器端到浏览器端的持续连接的技术，可以很好地用来实现像聊天室这样需要实时更新数据的应用。 在本文中，我们将介绍如何使用 SSE 建...

    1 年前
  • Babel 编译器如何快速支持 JS 最新语法特性

    JavaScript 语言一直在不断发展，新的语法特性也随之出现。然而，不同的浏览器支持的语法特性也不同，导致前端开发者需要使用兼容性工具来保证代码在不同浏览器上的兼容性。

    1 年前
  • 在 Jest 测试中使用 ES modules 的报错

    当尝试在 Jest 测试中使用 ES modules 时，你可能会遇到以下错误： ------------ ------ --- ------ --------- ------- - ------这是...

    1 年前
  • Chai 中使用 should 和 expect 风格的断言

    Chai 中使用 should 和 expect 风格的断言 Chai 是一个流行的 JavaScript 断言库，可以用于编写可读性强的测试代码。在 Chai 中，有两种不同的断言风格：should...

    1 年前
  • Vue.js中使用Element-UI实现搜索下拉框功能

    概述 Vue.js是一个流行的JavaScript框架，它提供了一种简单的方法来构建交互式的Web应用程序。Element-UI则是一款基于Vue.js的组件库，其中包含了许多实用的UI组件，如搜索下...

    1 年前
  • 如何在 Fastify 框架中实现邮件发送功能

    Fastify 是基于 Node.js 的快速 Web 框架，该框架提供了许多扩展性和可扩展性的功能。本文将介绍如何在 Fastify 框架中实现邮件发送功能。 一、安装 nodemailer nod...

    1 年前
  • 无障碍设计：如何优化你的网站加载速度？

    作为前端工程师，在设计网站时，我们需要考虑很多事情，例如用户交互、网站的美观性、可访问性等等。但是，我们经常会忽略另一个非常重要的因素，那就是页面的加载速度。在今天的网络世界中，用户对网站的要求非常高...

    1 年前

相关推荐

    暂无文章