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