urql基于 React 的 GraphQL 客户端

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} />;

};