我正在寻找在 Next.js 应用程序中更好地获取数据的解决方案。在这个问题上我不只是在寻找一个解决方案，我正在寻找多种选择，所以我们可以看一下利弊。

我遇到的问题

现在我有几个页面都包含一个显示一些静态内容的组件和一个从 API 获取的一些动态内容的组件。每个页面都做一个fetch()在他们getInitialProps()自己的页面数据中，还有页脚数据，这对所有页面都是一样的。

这当然有效，但有很多重复的数据提取。页脚数据将始终为所有页面显示并且始终相同。它也很少在 API 中更改，因此无需重新验证数据。

我正在寻找的答案

我不只是想解决这个问题，我也在寻找一个概述，以便为未来的项目学习一些新的实践。我喜欢编写“明显”的代码，所以不要寻找太hacky的解决方案，比如写入window对象等。优先考虑依赖较少的简单解决方案。目标是一个快速的网站。减少网络使用/API 调用并不是那么重要。

到目前为止我的想法

这是我想出的可能的解决方案，从简单/明显到更复杂。

1. 在页脚组件（客户端）内进行提取
2. 在所有/页面上的 getInitialProps（服务器端和客户端）中执行提取
3. 在 _app.js 中使用 HOC 进行 fetch 并挂钩并将其getInitialProps()添加到 props，因此数据可用于所有页面
4. 使用 zeit/swr 和数据预取来缓存数据
5. 使用 redux 存储全局状态

所有这些“工作”，但其中大多数会不必要地重新获取数据，和/或增加一点复杂性。以下是我所看到的优缺点（数字与上面相同）：

1. 简单的！提取代码仅在一处，它位于使用它的地方。页面加载后获取数据，因此内容“跳转”查看。数据一直在重新获取。
2. 简单的！在服务器上获取数据，因此在呈现页面之前内容可用。为每个页面重新获取数据。我们必须记住为他们的getInitialProps().
3. 我们可以在一个地方进行 fetch 并将其添加到所有页面 props，因此页脚数据可自动用于所有页面的 props。对于某些人来说，要轻松理解正在发生的事情可能会更复杂一些，因为它需要更多地了解 Next.js/React 的工作原理。仍然重新获取所有页面的数据。我们现在fetch()依次进行两次调用（首先在 _app.js 中加载页脚内容，然后在每个页面中获取自定义内容），所以它甚至更慢。
4. 有点简单。我们甚至可以在加载 JS 之前使用预取将数据加载到缓存。在第一页加载后，我们将有快速的数据获取。可以直接在页脚组件中获取代码。该rel="preload"预取技术不会与所有类型的获取（使用groq例如理智的客户）的工作。要对数据进行页面加载完成后加载没有“跳跃”的内容，我们应该提供useSWR()具有initialData仍需要我们在获取数据getInitialProps()，但它是不够的，只是做在服务器端。可以用新的getServerSideProps()。
5. 我们可以加载一次数据（？）并使其在整个应用程序中可用。快速且更少/无需重新获取。添加外部依赖。更复杂的是你必须学习 redux，甚至只加载一个共享数据对象。

当前解决方案，使用项目符号 2 中描述的解决方案。

const HomePage …

我是 Sanity 的新手，刚刚建立了一个项目。一切工作正常，但是，在 Visual Studio Code 中，我不断收到不会消失的解析错误，我想知道如何修复它。

Parsing error: Cannot find module '@babel/preset-env'

我尝试删除node_modules并重新运行sanity install，我也尝试使用npm install安装@babel/core和@babel/preset-env。到目前为止似乎还没有解决这个问题。

有什么建议么？我想开始在工作中与我的团队一起使用 Sanity，但是出现这个错误确实很烦人（因为所有内容都用红色下划线表示）。

启动理智工作室给我带来了这个错误。该页面在本地主机中旋转得很好。任何解决此问题的帮助将不胜感激

这是完整的错误：

[plugin:vite:css] [postcss] Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:84:63)
    at /Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:96:92
    at /Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/index.js:38:63)
    at LazyResult.runOnRoot (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:206:17)
    at processTicksAndRejections (node:internal/process/task_queues:96:5

这是我的 tailwind.config.js 文件的内容

@type {import('tailwindcss').Config} 
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar')
  ],
}

从我的理智后端提取数据时，我的反应本机项目出现错误\xc2\xa0\n\xc2\xa0\n这是错误\nURLSearchParams.set is not implemented

这是我获取 data\xc2\xa0 的地方

import {View, Text,SafeAreaView,Image,TextInput,ScrollView} from 'react-native'\nimport React, {useEffect, useLayoutEffect, useState} from 'react'\nimport {useNavigation} from "@react-navigation/native";\nimport {ChevronDownIcon, UserIcon,AdjustmentsVerticalIcon,MagnifyingGlassIcon} from "react-native-heroicons/outline";\nimport Categories from "../components/Categories";\nimport FeaturedRow from "../components/FeaturedRow";\nimport client from "../sanity";\n\nconst HomeScreen = () => {\n    const navigation = useNavigation();\n    const [featuredItems, setFeaturedItems] = useState([]);\n\n    useLayoutEffect(()=>{\n        navigation.setOptions({\n            headerShown: false,\n        });\n    },[]);\n\n    useEffect(()=>{\n        const query = `*[_type == "featured"]`;\n\n        client\n            .fetch(query)\n            .then((data)=>{\n                setFeaturedItems(data)\n            })\n            .catch((error)=>{\n                console.log('Error:',error);\n            });\n    }, []);\n

这也是我的 Sanity.js 代码

import …

这是我第一次使用 sanity，我在运行时遇到了这个问题expo start，如果你能帮助我解决这个问题，我将非常感激

jest-haste-map: Haste module naming collision: deliveroo-clone
 The following files share their name; please adjust your hasteImpl:
* <rootDir>\package.json
* <rootDir>\sanity\package.json

Failed to construct transformer:  DuplicateError: Duplicated files or mocks. Please check the 
console for more info
at setModule (C:\Users\Slima\Desktop\deliveroo-clone\node_modules\jest-haste- 
map\build\index.js:576:17)
at workerReply (C:\Users\Slima\Desktop\deliveroo-clone\node_modules\jest-haste- 
map\build\index.js:647:9)
at async Promise.all (index 10)
at C:\Users\Slima\Desktop\deliveroo-clone\node_modules\jest-haste-map\build\index.js:459:22
at Function.load (C:\Users\Slima\Desktop\deliveroo-clone\node_modules\metro\src\node- 
haste\DependencyGraph.js:86:36)
at Bundler.ready (C:\Users\Slima\Desktop\deliveroo- 
clone\node_modules\metro\src\Bundler.js:61:5)
at IncrementalBundler.ready (C:\Users\Slima\Desktop\deliveroo- 
clone\node_modules\metro\src\IncrementalBundler.js:309:5)
at Server.ready (C:\Users\Slima\Desktop\deliveroo- 
clone\node_modules\metro\src\Server.js:1156:5) {
mockPath1: 'package.json',
mockPath2: 'sanity\\package.json'
}`
Unrecognized event: …

我在将制作 Sanity Studio 的内容传输到制作博客时遇到问题。我正在使用 Next.js v13 和 Sanity v3。该站点部署在 Vercel 上。

当我从本地 Sanity Studio 和制作 Sanity Studio 发布内容时，它会在我的本地网站上更新。除非我使用 Vercel 重新部署我的站点，否则它不会更新我的生产站点。我已经找到了除我之外的其他人的解决方案\xe2\x80\x94add revalidateto getStaticProps. 这对我不起作用。这是我的代码：

export async function getStaticProps(context) {\n  const { slug = '' } = context.params;\n  const post = await client.fetch(query, { slug });\n  return {\n    props: {\n      post,\n    },\n    revalidate: 10,\n  };\n}\n

我在本地和产品站点的控制台或终端中都没有收到任何错误。只是为了好玩，我清空了缓存并在产品页面上进行了硬重新加载，在隐身窗口中打开它，在 Firefox、Chrome 和 Edge 上打开它，并在这里坐了大约一个小时点击刷新。还有其他解决方案吗？

我有一个包含posts 的数据集，其中可能有一系列类别。

如何进行 GROQ 查询来选择标题为“Page”的类别的所有帖子？

我想我可以做这样的事情：

*[_type == 'post' && categories[]->title == 'Page']{
  body,
  slug,
}

我可能需要使用函数在数组内进行匹配，但清单对我来说太密集了 - 我只是找不到它。

我的数据集的要点是：

*[_type == 'post' && categories[]->title == 'Page']{
  body,
  slug,
}

一个简单的查询：

*[_type == 'post']{
  //  body,
  "category": categories[]->title,
  //  slug,
  categories
}

返回：

{
  categories: [],
  category: []
}

{
  categories: [
    {
      _key: "491c03573205",
      _ref: "e84d78f0-81ed-4524-9c36-f38a1f1b2375",
      _type: "reference"
    }
  ],
  category: [
    Page
  ]
}

我有很多标签，我需要为每个文档选择很多标签。每次都要一张一张地点击，很不舒服。我还看到了选定的元素。我怎样才能将它重新制作成像多选这样的字段？它甚至可能是本地的。或者如何一次选择所有标签？

我正在使用数组：

{
  title: 'Language',
  name: 'language',
  type: 'array',
  options: {
    layout: 'grid'
  },
  of: [{
    type: 'reference',
    title: 'Lang',
    to: {
      type: 'settingLanguages'
    }
  }],
},

我正在寻找一种将多个图像上传到 sanity.io 的方法。我唯一发现的是这个问题。

但也许还有另一种方式。一些 npm-plugin 或 node.js 应用程序方法。

我将不胜感激。

内容类型“产品”具有以下字段：

• string标题
• int数量
• string描述
• double价格

是否有 API 端点来检索“产品”内容类型的结构或模式而不是获取值？

例如：在端点上localhost:1337/products，响应可以是这样的：

[
  {
    field: "title",
    type: "string",
    other: "col-xs-12, col-5"
  },
  {
    field: "qty",
    type: "int"
  }, 
  {
    field: "description",
    type: "string"
  },
  {
    field: "price",
    type: "double"
  }
]

模式或表的结构而不是实际值发送到哪里？

如果不在 Strapi CMS 中，这在其他无头 CMS（例如 Hasura 和 Sanity）上是否可行？