urql基于 React 的 GraphQL 客户端

联合创作 · 2023-09-19 18:53

urql 是一个 React 的组件,实现高度可定制化以及功能强大的 GraphQL 客户端。

快速上手:

首先安装 urql 和 graphql:

yarn add urql graphql
# or
npm install --save urql graphql

创建一个客户端并使封装成 <Provider> 组件

import { Provider, createClient } from 'urql';

const client = createClient({
  url: 'http://localhost:1234/graphql', // Your GraphQL endpoint here
});

ReactDOM.render(
  <Provider value={client}>
    <YourApp />
  </Provider>,
  document.body
);

你可以使用 <Query> 组件来从服务器获取数据:

import { Query } from 'urql';

<Query query="{ todos { id } }">
  {({ fetching, data }) =>
    fetching ? <Loading /> : <List data={data.todos} />
  }
</Query>;

你也可以利用 useQuery 钩子带来的便利:

import { useQuery } from 'urql';

const YourComponent = () => {
  const [{ fetching, data }] = useQuery({ query: `{ todos { id } }` });
  return fetching ? <Loading /> : <List data={data.todos} />;
};
浏览 1
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报