如何更改 GraphQL 时间的时区？答案

【问题标题】：How do I change the timezone of my GraphQL time?如何更改 GraphQL 时间的时区？
【发布时间】：2021-07-15 15:33:27
【问题描述】：

我发现了很多关于使用 Date() 和获取时区的好信息，但是有些东西不起作用。我将 GraphQL（来自 Sanity）设置为使用 formatString，如下所示：

export default function MinutesItemGrid() {
  const { minutes } = useStaticQuery(graphql`
    query {
      minutes: allSanityMinutes {
        nodes {
          endTime(formatString: "h:mma [on] MM/DD/YYYY")
         }
      }
   }
`);

然后在.map 中调用它：

const allMinutes = minutes.nodes;
return (
    <CardStyles>
      {allMinutes.map((minute) => (
        <ItemStyles>
          <div className="card" key={minute.id}>
            <div className="content">Meeting began at: {minute.endTime}</div>
          </div>
        </ItemStyles>
     ))}
    </CardStyles>
  );

显示为 2020 年 10 月 14 日晚上 11:33。这比应有的时间提前了 6 小时。

我知道这会返回标准的 UTC 时间。我知道如何获取本地时间偏移 (new Date().getTimezoneOffset();) 和获取本地时区 (Intl.DateTimeFormat().resolvedOptions().timeZone)，但我没有看到将时区更改为 MST（或本地时间）而不是 UTC 的选项。我尝试以各种方式减去 6 小时，尝试使用 moment.js 和 moment.js 时区根据他们的文档更改时区。我刚刚发现 Luxon 现在是一个更好的选择，但即使在他们的文档中，从 GraphQL 提取数据时我也看不到解决方案。

【问题讨论】：

标签： javascript graphql timezone sanity

【解决方案1】：

如果您打算使用 Luxon，您可以使用 DateTime 将日期时间转换并格式化为任何给定的时区。

例如，MDT 是 UTC-6。因此，将日期时间转换为 ISO 字符串格式。

import { DateTime } from "luxon"

DateTime.fromISO(datetime, { zone: 'utc-6' }).toString()

这会将 MDT 区域中的日期时间输出为 2021-04-21T07:36:04.529-06:00

【讨论】：

感谢您回复@Y.S.这绝对让我走上了正确的道路。我不明白的一件事是如何在 DateTime 中使用我的 GraphQL 作为参数。看起来在您的示例中 datetime 是 GraphQL 参数，但我有两个 GraphQL 参数要声明：endTime 和 meetingStart。我必须在我的函数中声明它，以便 GraphQL 是可引用的；但是，如果我在.map 之外执行此操作，则它返回未定义，如果我在.map 内执行此操作，它会中断。我做错了什么？这部分需要放在我的 Sanity 或 Gatsby 文件夹中吗？

【解决方案2】：

经过多次尝试，我找到了答案 & 错误以防这对将来的任何人有帮助。我遇到的问题是这一点：endTime(formatString: "h:mma [on] MM/DD/YYYY")

这样做是在我调用DateTime.from(minute.endTime, { zone: 'utc-6',}) 之前格式化字符串，以便它返回一个无效条目，因为.fromISO 期待这种格式2020-10-14T17:33:00.000。一旦我删除了除了格式之外一切都很好，我发现它不是使用.toString() 方法，而是我必须使用.toFormat() 方法。所以这是我原来问题的更正代码：

export default function MinutesItemGrid() {
  const { minutes } = useStaticQuery(graphql`
    query {
      minutes: allSanityMinutes {
        nodes {
          endTime
         }
      }
   }
`);

然后.map在graphql上：

const allMinutes = minutes.nodes;
return (
<CardStyles>
  {allMinutes.map((minute) => {
    const endMDT = DateTime.fromISO(minute.endTime, {
      zone: 'utc-6',
    }).toFormat('h:mma MM/dd/yyyy');
    <ItemStyles>
      <div className="card" key={minute.id}>
        <div className="content">Meeting began at: {endMDT}</div>
      </div>
    </ItemStyles>
 ))}
</CardStyles>

);

【讨论】：