接下来,让我们从高层次逐行分解该查询:
query GetProductList- 这告诉 GraphQL 我们正在发送一个可以识别为“GetProductList”的查询(类似于 REST API 中的 GET 请求)。
products(sortKey: TITLE, first: 100)- 现在我们告诉 GraphQL 我们想要从数据库请求什么。在本例中,我们请求“产品”,并传入参数以按 TITLE 对结果进行排序,并将请求限制为仅前 100 个。
edges- 这些是与“产品”的连接。
node- 这些是代表每个“产品”的单个项目。
id和title- 这些是node我们正在请求的属性。您很快就会看到,为了填充我们的商店,我们将请求更多属性。
如果您想了解产品还有哪些其他选项,请查看Storefront API 产品的官方文档。
这是我对 Shopify Nuxt 入门套件使用的完整查询,它包装在 try / catch 块中以解释错误路径。
您可以在此处找到项目中的最终文件。
一旦用户可以看到所有商品,下一步就是允许他们查看特 约旦 Whatsapp 数据 定产品的详细信息。虽然您可能能够在初始“获取产品列表”请求中一次查询所有商品,但从长远来看,这不具备可扩展性,因为我们无法保证某件商品会出现在前 100 件商品中。
因此,我们想要创建一个端点,用于根据产品的句柄直接获取产品。您可以在官方文档中了解有关 API 的更多信息。
以下是我实现端点的方法,通过允许端点采用可通过页面 URL 传递的自定义 itemHandle 参数。
此 GraphQL 请求与我们执行的请求之间的主要区别 在于,我们还利用了variables允许您将自定义请求传递给 Shopify。 在这种情况下,由于我们需要请求特定产品,因此变量handle将在以下几行中传递到查询中:
这告诉 GraphQL 我们的查询将接收一个 String 类型的变量,并且它是必需的
这将向 发出请求,并将我们的$handle变量传递给参数handle
除此之外,其余字段应该与我们上次查询的字段看起来相似。
您可以在此处找到项目中的无服务器功能以及它在项目中的实现位置。
最后的想法
通过这篇文章,我希望您能够看到无服务器功能如何为释放我们设计 API 的能力提供关键基础,然后我们可以在我们最喜欢的框架中使用这些 API。
为了缩短上市时间并为团队提供更好的开发体验,DocuSign 开发团队决定重新设计其营销网站,并最终从 Drupal 迁移到现代堆栈。正如 DocuSign 团队负责人 Grant Glidewell 所说,目标是“消除基础设施的阻碍”,并使其开发团队能够更快地提供更好的网络体验。
他们的新无头方法使用了自主研发的 API、Contentful、Next.js 和 Netlify的混合体。