JavaScript：graphql-hooks（客户端）

graphql-github-io-zh-Hans生态项目与库

graphql-hooks

graphql-hooks 是一个极简的、以 React Hooks 为核心的 GraphQL 客户端。它拥有极小的打包体积、完整的 SSR 支持以及灵活的缓存插件。

特性

🥇 一流的 Hooks API
⚖️ 极小的打包体积：仅 7.6kB（gzip 后 2.8kB）
📄 完整的 SSR 支持：参见 graphql-hooks-ssr
🔌 插件式缓存：参见 graphql-hooks-memcache
🔥 告别 render props 嵌套地狱
⏳ 轻松处理 loading 和 error 状态

快速开始

bash 复制代码

npm install graphql-hooks

首先，创建一个客户端，并用 ClientContext.Provider 包裹你的应用：

js 复制代码

import { GraphQLClient, ClientContext } from 'graphql-hooks'

const client = new GraphQLClient({
  url: '/graphql'
})

function App() {
  return (
    <ClientContext.Provider value={client}>
      {/* children */}
    </ClientContext.Provider>
  )
}

现在，在子组件中即可使用 useQuery：

js 复制代码

import { useQuery } from 'graphql-hooks'

const HOMEPAGE_QUERY = `query HomePage($limit: Int) {
  users(limit: $limit) {
    id
    name
  }
}`

function MyComponent() {
  const { loading, error, data } = useQuery(HOMEPAGE_QUERY, {
    variables: {
      limit: 10
    }
  })

  if (loading) return 'Loading...'
  if (error) return 'Something Bad Happened'

  return (
    <ul>
      {data.users.map(({ id, name }) => (
        <li key={id}>{name}</li>
      ))}
    </ul>
  )
}

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。