ACF自定义字段WP GraphQL在Gatsby中突然开始返回null，尽管它过去是有效的

ACF自定义字段是指Advanced Custom Fields（高级自定义字段）插件中的自定义字段。WP GraphQL是一个WordPress插件，它允许通过GraphQL查询语言来查询和操作WordPress数据。Gatsby是一个基于React的静态网站生成器。

当ACF自定义字段在Gatsby中突然返回null时，可能有以下几个原因：

数据同步问题：确保ACF自定义字段的数据已经同步到Gatsby的数据源中。可以通过重新运行Gatsby的构建命令来更新数据源。
GraphQL查询问题：检查GraphQL查询语句是否正确，确保正确地查询了ACF自定义字段。可以使用GraphiQL工具来测试和调试GraphQL查询语句。
插件版本兼容性问题：确保使用的ACF和WP GraphQL插件版本是兼容的。查看插件的文档或支持页面，了解是否存在已知的兼容性问题或解决方案。
数据库连接问题：检查数据库连接是否正常，确保Gatsby能够正确访问WordPress数据库中的ACF自定义字段数据。
缓存问题：如果之前ACF自定义字段是有效的，但突然返回null，可能是由于缓存导致的。尝试清除Gatsby和浏览器的缓存，然后重新加载页面。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云数据库（TencentDB）。腾讯云云服务器提供可靠的计算能力，适用于部署Gatsby和WordPress等应用程序。腾讯云数据库提供高性能、可扩展的数据库服务，适用于存储和管理ACF自定义字段数据。

腾讯云云服务器产品介绍链接：https://cloud.tencent.com/product/cvm 腾讯云数据库产品介绍链接：https://cloud.tencent.com/product/cdb

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一杯茶的时间，上手 Gatsby 搭建个人博客

在一次换系统之后，项目终于构建不了了，包冲突处理起来非常头疼，也影响到了写博文的兴致。拖延了一段时间后，终于开始考虑更换框架。.../static 放其它静态资源，会跳过 Webpack 直接复制过去。接下来是两个比较常用的配置文件，需要修改时参考 Starter 改即可。...在 Gatsby 中，根据 js 文件的位置不同，使用 GraphQL 有两种形式，且 Gatsby 对其做了魔法，在 src/pages 下的页面可以直接 export GraphQL 查询，在其它页面需要用...在 /gatsby-node.js 中配置 Gatsby Node APIs，如果项目是基于 starter 的话你很可能会发现里面已经有相应的配置。...首先是普通的文章页面生成，这个是在 createPages 钩子中，如果你的博客只有文章用到 Markdown 的话，可以在 GraphQL 查询中直接过滤，否则我们用前面文章的方法，先取所有 Markdown

3.2K2 0

用 Gatsby 创建一个博客

在这篇文章中，我们将深入探讨 Gatsby 和一些新特性，并创建一个静态博客。让我们开始吧！...接下来:以编程方式创建必要的静态页面(并将模板注入)与 Gatsby 的 Node API，让我们开始吧。此时需要注意的一点是，GraphQL 查询是在构建时进行的。...每个公开的属性(在节点上)都可以用于查询。我们正在有效地创造一个GraphQL数据库，然后我们可以通过页面级的GraphQL查询对它进行查询。...这里要注意的是 exports.createPages API 期望返回一个 Promise。...我们的 GraphQL“形状”直接反映在这个数据对象中，因此，当我们在GraphQL博客文章模板中查询时，我们从该查询中提取的每个属性都将可用。

2.5K3 0

你的博客用不着什么JavaScript框架

原因如下：虽然一开始我是“全栈”开发人员，但现在我只负责前端工作：如果我需要编写自定义功能，那么能用 JavaScript 编写的代码我就不想用 PHP 来写。...它有一个由 GraphQL 支持的数据层，并将所有内容输出到静态文件，使你可以在几乎任何地方托管它。...这里就有些不对劲——Gatsby 需要你以 React 组件的形式再加载一次页面；在完成多出来的这一步之前，所有需要 JavaScript 的元素（例如按钮、菜单、自定义输入）实际上都不能交互。...JavaScript 是一种强大的语言，可以完成一些令人难以置信的事情，但是在开发中你很容易过早开始使用它，其实本来用 HTML 和 CSS 就够了。...有一些 JavaScript 库可以做到这一点，其中最流行的似乎是 Prism——你可以在客户端中运行它，但由于我们使用的是 JavaScript SSG，因此可以在构建时运行它，并将语法高亮显示所需的

4.1K1 0

Vue.js最佳静态站点生成器对比

在 VuePress 中，每个页面都被视为一个 markdown 文件，它们被渲染为 HTML 页面，并在加载页面时充当一个单页应用程序。...与 React 中的 Gatsby 相似，Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容，然后从中动态生成页面。...你可以使用 gridsome develop 命令在本地运行项目，以在 localhost:8080/___explore 处浏览这个 GraphQL 数据层。...此外，Gridsome 在性能、学习曲线、社区规模等方面都能与 Gatsby 相提并论。...GitHub 统计数据但我们应该注意的是，这些框架中的每一个都有自己独特的功能。例如，Saber 计划扩展对 React 的支持，因此有可能成为全球热门产品。

5K1 0

WP Engine推出AI驱动的WordPress网站搜索

专有工具在本周的 WP Engine 虚拟 De{Code} 会议中向开发者和其他 WordPress 用户展示。...利用高级自定义字段进行智能搜索 ACF 代表高级自定义字段，适用于 CMS。...他补充说，为了创造增强的搜索体验，智能搜索必须与 ACF 很好地配合。就目前而言，索引 ACF 是“WordPress 中搜索出了名的难题”。...“我们所做的是索引和映射你的 ACF 字段，开箱即用，点击一个按钮，无需自定义映射，无需简码，无需任何代码，你只需在智能搜索中默认索引所有 ACF 和所有自定义帖子类型，”他说。...将搜索从 WordPress 数据库中卸载，并自动索引 ACF 字段中的所有自定义帖子类型——我们认为这是我们在此处 […] 独一无二的地方；再次希望以 WordPress 开发人员工作的方式工作，”他说

1251 0

为什么我使用 GraphQL 而放弃 REST API？

没错，Dropbox API 端点要求你将请求正文留空，并将有效载荷序列化为 JSON，放到一个自定义的 HTTP 头中。为这种特殊情况编写客户端代码很有趣。...在待办事项列表应用中，列表本身就是一个集合。大多数集合都可以包含 100 多个项。对于大多数服务器来说，在一次响应的一个集合中返回所有项是一个繁重的操作。...也就是说，如果需要自定义参数、高级过滤行为或对请求 / 响应有效负载的一些更智能的处理，就需要从头重新实现端点。另一项任务是在客户端代码中使用这些端点。...请注意，allTodos字段的offset参数是缺失的。作为可选项，它的缺失意味着它有null值。如果服务器提供这种模式，文档中可能会声明，null偏移量意味着默认情况下应该返回第一页。...有很多流行的开源项目都在使用 GraphQL：这个博客是基于静态站点生成器 Gatsby，它将 GraphQL 查询的结果转换成数据，然后呈现到 HTML 文件中。

2.3K3 0

塔荐 | 2018 年最值得关注的 JavaScript 趋势

谈到取悦开发者，不要忘了Facebook今年在BSD+Patents的收钱事件中遭遇的史诗般的失败，这惹恼了不少的开发者。...GraphQL GraphQL 是API的查询语言（可以看成是REST的现代版）。...如果你想在创新公司找份工作的话，现在绝对是开始学习GraphQL的时候。...Gatsby Gatsby 是Kyle Mathews开发的用于React的静态网站生成器。自从Kyle去年全职开发Gatsby以来，这个东西开始真正获得发展势头。...正如我们的redditor网友指出那样，这对于大型团队的开发者会极其有用，因为这些人经常会无意识地搞乱了状态。封装在Immutable.JS对象里面的数据是永远也不会变的。它总会返回一份新的拷贝。

1.5K8 0

干货 | 携程基于 GraphQL 的前端 BFF 服务开发实践

一、前言过去两三年，携程度假前端团队一直在实践基于 GraphQL/Node.js 的 BFF (Backend for Frontend) 方案，在度假BU多端产品线中广泛落地。...如此无限堆砌数据接口，最终仍然是一个发散的模型，每增加一个数据消费场景需求，就追加一个接口字段。并且，当某些接口字段的参数，依赖其它接口的返回值，常常得重新发起一次 GraphQL 请求。...在 GraphQL 中，空值处理有个特性是，当一个非空字段却没有值时，GraphQL 会自动冒泡到最近一个可空的节点，令其为空。...由于非空类型的字段不能为空，字段错误被传播到父字段中处理。如果父字段可能是null，那么它就会解析为null，否则，如果它是一个非null类型，字段错误会进一步传播到它的父字段。...在很多优化首屏的实践中，利用 GQL 动态查询，灵活剪切契约等是非常有效的手段。并且在过程中，服务端并不需要跟随前端调整代码。降低工作量的同时，也保证了其他平台的稳定性。

2.6K2 0

GraphQL学习第一篇－GraphQL简介

从这个意义上说，它是数据库无关的，而且可以在使用 API 的任何环境中有效使用，我们可以理解为 GraphQL 是基于 API 之上的一层封装，目的是为了更好，更灵活的适用于业务的需求变化。...为什么推荐 GraphQL 而不是 RESTful API 在过去的十多年中，REST 已经成为设计 Web API的标准(虽然只是一个模糊的标准)。...前端对于真正用到的字段是没有直观映像的，仅仅通过 URL 地址，无法预测也无法回忆返回的字段数目和字段是否有效，接口返回 50 个字段，但却只用 5 个字段，造成字段冗余，扩展性差，单个 RESTful...前后端字段频繁改动，导致类型不一致，错误的数据类型可能会导致网站出错，尤其是在业务多变的场景中，很难在保证工程质量的同时快速满足业务需求 2. GraphQL 的优点 (1)....客户端可以自定义 API 聚合。如果设计的数据结构是从属的，直接就能在查询语句中指定，即使数据结构是独立的，也可以在查询语句中指定上下文，只需要一次网络请求，就能获得资源和子资源的数据。

5313 0

大势 | 2018最值得关注的JavaScript趋势

谈到取悦开发者，不要忘了Facebook今年在BSD+Patents的收钱事件中遭遇的史诗般的失败，这惹恼了不少的开发者。...GraphQL GraphQL 是API的查询语言（可以看成是REST的现代版）。...如果你想在创新公司找份工作的话，现在绝对是开始学习GraphQL的时候。...Gatsby Gatsby是Kyle Mathews开发的用于React的静态网站生成器。自从Kyle去年全职开发Gatsby以来，这个东西开始真正获得发展势头。...正如我们的redditor网友指出那样，这对于大型团队的开发者会极其有用，因为这些人经常会无意识地搞乱了状态。 “封装在Immutable.JS对象里面的数据是永远也不会变的。它总会返回一份新的拷贝。

8022 0

在Genesis主题中手动添加WordPress相关文章

1.3K3 0

展示 Postlight 的 WordPress + React Starter Kit

在我们与不同客户的合作中，我们看到了一些情况、业务原因和项目先决条件，这些情况使带有响应前端的 WordPress 后端成为好兆头。...你已准备好将你的网站从 WordPress 移至另一个解耦的 CMS，但需要零碎地进行 — 首先是前端，然后是后端。...你必须设置自定义帖子类型和自定义字段（Progressed Custom Fields Master 和自定义帖子类型 UI）的 WordPress 模块。...WordPress 模块在 WP REST 编程接口（ACF 到 WP 编程接口和 WP-REST 编程接口 V2 菜单）中发现那些自定义字段和 WordPress 菜单。...一种使用 WP Move DB Master 有效地从网络上任何地方的当前 WordPress 机构引入信息的工具，并且它与模块一起使用（需要许可）。由 Next.js 控制的入门前端响应应用程序。

1.1K3 1

【前端必看】2017 年 JavaScript 全面崛起大运势

CSS in JavaScript 目前仍然没有对 React 组件样式进行有效管理的最佳实践。...GraphQL 在未来回顾 GraphQL 的历史时，2017 年很有可能会成为一个转折点。...像 the New York Times 这样的大公司开始使用 GraphQL，Relay 和 Apollo (两个主要的 GraphQL 客户端框架) 也在今年发布了两个重要的版本更新。...在这两大库的身后，像 Graphcool 这样的公司也提供了大量的工具和库，而 Vulcan 这样的全栈框架也开始采用 GraphQL 。...值得注意的是今年最有人气的静态网站生成器 Gatsby 也在数据处理中使用了 GraphQL 。

2.7K5 0

GraphQL 的入门指南

什么是 GraphQL GraphQL 是 Facebook 开发的一种开源查询语言。它为我们提供了一种更有效的设计、创建和使用 Api的方法。从根本上说，它是 REST 的替代品。...GraphQL是强类型的，通过它，可以在执行之前验证 GraphQL 类型系统中的查询，它帮助我们构建更强大的 Api。...类型字段可以是任何类型，并始终返回一种数据类型，如 Int，Float，String，Boolean，ID，对象类型列表或自定义对象类型。...但是，在每一行的结尾的！呢？感叹号表示字段不可为空，这意味着每个字段必须在每个查询中返回一些数据。 User 中唯一可以为空的字段是 age。...在 users 函数中，我们只是返回已存在的 users 数组，这个数组存放的是所有的用户。

2K3 0

2020 年你应该知道的 React 库

例如，gatsby-Firebase-authentication 样板文件只在 Gatsby.js 中为您提供了完整的 Firebase 身份验证机制，但是其他所有内容都被省略了。...建议: React Router React 中的样式库虽然关于 React 样式处理有很多解决方法，但是作为一个 React 初学者，刚开始使用内联样式和基本 CSS 是很好的。...它提供了从验证到提交到形成状态管理所需的一切。另外一个选择是 React Hook Form。如果您开始使用更复杂的表单，这两种方法对于 React 应用程序都是有效的解决方案。...通常的方法是使用自定义身份验证实现自己的自定义后端应用程序。如果您不想启动自己的身份验证，可以考虑类似 Passport.js 的东西。...由于 JSX 是 HTML 和 JavaScript 的混合物，所以您可以使用 JavaScript 在数组上进行映射并返回 JSX。

14.4K4 0

什么是GraphQL？【Programming】

查询语言 Graphql 作为一种查询语言似乎是合理的——“ QL”似乎非常重要，因此名字中也有它的名字。但我们在质疑什么呢？查看样例查询请求和相应的响应可能会有所帮助。...Graphql模式是一种自定义类型化语言，它公开哪些查询是允许的（有效的），并由GraphQL服务器实现处理。...客户机可以通过用户查询请求用户的任何字段，而GraphQL服务器将在其响应中只返回这些字段。通过使用强类型模式，GraphQL服务器可以验证传入的查询，以确保它们基于已定义的模式是有效的。...一旦查询被确定为有效，解析器将对它进行GraphQL服务器处理。一个解析器函数回退每个GraphQL类型的每个字段。...这使客户端应用程序可以开始获得所需的性能和运营效率，同时使后端团队有机会确定他们可能希望在GraphQL层背后进行“幕后”的更改（如果有）。

9020 0

一个治愈JavaScript疲劳的学习计划

JavaScript vs JavaScript 在我们开始之前，我们要确保我们讨论的是同一件事。...以下是用 Gatsby 作为开始学习 React 的好处：一个已经预配置好的 Webpack ，说明你可以放心地做个伸手党。基于你的目录结构自动路由。...GraphQL 已经在过去的一年或更久得到了很快的发展，已经有很多的项目（例如 Gatsby，我们在第2周用到的）计划着要去使用它了。...React & Co 之外我建议您从 React 开始，因为它是一个安全的选择，但绝不是唯一有效的前端技术栈。...下一步到目前为止，您应该很好地掌握了整个 React 的前端技术栈，希望你可以有效地将它带到生产中。但这并不意味着就完了! 这只是您进入 JavaScript 大生态的一个开始.。

7882 0

GraphQL+Koa2实现服务端API结合Apollo+Vue

从这个意义上说，它是数据库无关的，而且可以在使用 API 的任何环境中有效使用，我们可以理解为 GraphQL 是基于 API 之上的一层封装，目的是为了更好，更灵活的适用于业务的需求变化 GraphQL...前端对于真正用到的字段是没有直观映像的，仅仅通过 url 地址，无法预测也无法回忆返回的字段数目和字段是否有效，接口返回 50 个字段，但却只用 5 个字段，造成字段冗余，扩展性差，单个 RESTful...尤其是在业务多变的场景中，很难在保证工程质量的同时快速满足业务需求 GraphQL 的优点吸收了 RESTful API 的特性所见即所得各种不同的前端框架和平台可以指定自己需要的字段。...查询的返回结果就是输入的查询结构的精确映射客户端可以自定义 Api 聚合如果设计的数据结构是从属的，直接就能在查询语句中指定;即使数据结构是独立的，也可以在查询语句中指定上下文，只需要一次网络请求...可以用于必须保证值不能为null的字段。

5.2K4 2

Vue 备受热捧、VS Code 成主宰！2020 前端开发趋势指南，先干为敬！

以下为译文：在过去的一年中，前端开发再次加快了发展的速度，本文总结了2019年以来的所有大事、新闻和趋势。...在过去的几年中，我们看到了WebAssembly 建立了1.0规范，而且所有主流浏览器都开始支持WebAssembly。...2019年中有关钩子的文章层出不穷，这方面的模式开始走向稳固，重要的 React 包都开始利用自定义钩子来导出其函数库的功能。钩子提供了一种通过简洁的语法管理功能组件的状态和生命周期的方法。...也许现在我们开始厌倦了工具了？ 16. GraphQL深受开发人员的喜爱，并在科技公司中得到进一步的采用 GraphQL 有望解决传统的基于 REST 的应用程序面临的许多问题。...在过去的一年中，GraphQL 的下载量增加了一倍，而 Apollo 也开始朝着使用最广泛的框架迈进。 17.

1.6K1 0

GraphQL 初体验，Node.js 构建 GraphQL API 指南

前言过去几年中，GraphQL 已经成为一种非常流行的 API 规范，该规范专注于使客户端（无论是客户端、前端还是第三方）的数据获取更加容易。...但是，与任何框架或语言一样，GraphQL 也需要权衡取舍。在本文中，我们将探讨使用 GraphQL 作为 API 查询语言的利弊，以及如何开始构建实现。...另一部分涉及实际获取数据，这是通过使用解析器完成的，解析器是一个返回字段基础值的函数。让我们看一下如何在 Node.js 中实现解析器。...GraphQL 解析器相当于一个 Object，key 是要检索的字段名，value 是返回数据的函数。...在左侧窗格中，你可以输入所需要的任何有效 GraphQL 查询，而在右侧获得结果。

8.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云