在客户端获取数据时遇到问题Next 13 & Sanity

whitzsjs 于 2023-05-06 发布在其他

关注(0)|答案(1)|浏览(150)

在Next 13中，我尝试了很多不同的方法在客户端组件中获取数据，但似乎没有一种方法有效。我还安装了一个库，react query，但它似乎也不工作。谁能给我展示一个在客户端组件中获取数据的例子？
下面是在常规服务器组件上工作的代码：
app/users/page.js

import { getUsers } from "../sanity/queries"

export default async function UsersPage() {
  const users = await getUsers();
  
  return (
    <main className="pt-[100px]">
      { JSON.stringify(users) }
    </main>
  )
}

sanity/queries.js

import { groq } from "next-sanity";
import client from "./client";

export async function getUsers() {
  return client.fetch(
    groq`*[_type == "user"]`
  )
}

如何将这些代码转换为客户端组件？先谢谢你了

next.js

来源：https://stackoverflow.com/questions/76143240/having-problems-with-fetching-data-in-client-next-13-sanity

1条答案

按热度按时间

eyh26e7m1#

您可以使用react-query库提供的useQuery钩子。下面是一个例子：

import { useQuery } from "react-query";
import { groq } from "next-sanity";
import client from "../sanity/client";

export default function UsersPage() {
  const { isLoading, error, data } = useQuery("users", async () => {
    return client.fetch(
      groq`*[_type == "user"]`
    );
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <main className="pt-[100px]">
      { JSON.stringify(data) }
    </main>
  );
}

赞(0）回复(0）举报 2023-05-06

我来回答

在客户端获取数据时遇到问题Next 13 & Sanity

1条答案

相关问题

热门标签

最新问答