用URQL和Next.js实施数据获取-DEV365 开发者社区

URQL

URQL是一个多功能的GraphQl客户库库，是其他重型客户库（例如Apollo或Relay）的简单且轻巧的替代品。它可以通过Document caching以及通过Normalized caching的动态和数据繁重的应用来处理内容的内容。

安装

使用下一个JS安装urql非常简单，您可以选择包装管理器。我们还需要将graphql软件包作为同行依赖性安装。

yarn add urql
or
npm install urql

yarn add urql graphql
or
npm install graphql

设置客户

urql为我们提供了一个Client类，我们使用它来创建以我们的API端点为URL的客户端的新实例。我们创建一个文件src/graphQL/client.ts来编写以下代码。

import { createClient } from "urql";

// YOUR API URL
const API_BASE_URL = "http://localhost:3000/graphql";

const client = createClient({
  url: API_BASE_URL,
});

export { client }

提供客户

我们需要将组件与Provider包裹起来，以使用先前定义的client，以便其中的每个组件都可以使用GraphQl查询。我们在Out pages/_app.tsx组件中进行此操作。

import { Provider as URQLProvider } from "urql";
import { client } from "../graphQL/client";

const App = () => {
  return (
    <URQLProvider value={client}>
      {/* Children component go here */}
    </URQLProvider>
  );
};

export default App;

运行查询

URQL的useQuery钩可用于从定义的查询中获取数据。让我们首先在单独的文件src/graphQL/queries/profile.ts
中实现一个简单的查询

import { gql } from "urql";

export const GET_PROFILE_QUERY = gql`
  query Profile {
    me {
      id
      username
      createdAt
    }
  }
`;

现在，我们可以使用此查询在组件中使用useQuery挂钩来获取定义的字段值，并在我们的应用程序组件中调用此组件。

import { useQuery } from "urql";
import { GET_PROFILE_QUERY } from "graphQL/queries/auth";
import { TextLoader } from "ui/components/CustomLoaders";
import ErrorMessage from "ui/components/ErrorMessage";

const Profile = () => {
  // useQuery hook
  const [result, reexecuteQuery] = useQuery({
    query: GET_PROFILE_QUERY,
  });
  const { data, fetching, error } = result;

  // Handle data fetching state with loader component
  if (fetching) return <TextLoader />;
  // Show error in the ui
  if (error) return <ErrorMessage />;

  // Show the received data
  return (
    <div>
      <span>{data.me.username}</span>
      <span>{data.me.createdAt}</span>
    </div>
  );
};

export default Profile;

在这里，我们实现了一个简单的查询来使用GraphQl获取数据。
fetching状态指示何时仍在获取数据，而error包含来自API或任何GraphQLError和data的数据获取错误。 useQuery钩返回元组并接受参数或变量。