如何更改 GraphQL 时间的时区？

如何解决如何更改 GraphQL 时间的时区？

我找到了很多关于使用 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 中提取数据时的解决方案。

解决方法

如果您打算使用 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

,

经过多次尝试，我找到了答案 & 错误，以防这对将来的任何人有帮助。我遇到的问题是：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>

);