{"id":47879,"library":"graphql-hooks","title":"GraphQL Hooks","description":"Minimal, hooks-based GraphQL client for React (v8.2.0, stable, maintained). Provides `useQuery`, `useMutation`, and `GraphQLProvider` with zero extra dependencies beyond React 17/18/19. Smaller bundle than Apollo Client (~3KB gzipped vs 30KB+), no cache or schema introspection by default. Ideal for lightweight React applications. Ships TypeScript definitions. Released under MIT. Current cadence: minor releases every few months.","status":"active","version":"8.2.0","language":"javascript","source_language":"en","source_url":"git://github.com/nearform/graphql-hooks","tags":["javascript","graphql","hooks","graphql-hooks","gql","gql-hooks","react-graphql-hooks","react","apollo","typescript"],"install":[{"cmd":"npm install graphql-hooks","lang":"bash","label":"npm"},{"cmd":"yarn add graphql-hooks","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphql-hooks","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: required at runtime for hooks and context.","package":"react","optional":false}],"imports":[{"note":"ESM-only; CJS require() will fail in Node. Use ESM imports.","wrong":"const { GraphQLProvider } = require('graphql-hooks')","symbol":"GraphQLProvider","correct":"import { GraphQLProvider } from 'graphql-hooks'"},{"note":"Named export, not default. TypeScript supports auto-import.","wrong":"import useQuery from 'graphql-hooks'","symbol":"useQuery","correct":"import { useQuery } from 'graphql-hooks'"},{"note":"All hooks are top-level exports from 'graphql-hooks'.","wrong":"import { useMutation } from 'graphql-hooks/useMutation'","symbol":"useMutation","correct":"import { useMutation } from 'graphql-hooks'"}],"quickstart":{"code":"import React from 'react';\nimport { GraphQLProvider, useQuery, useMutation } from 'graphql-hooks';\n\nconst client = new GraphQLClient({\n  url: process.env.GRAPHQL_URL ?? 'https://example.com/graphql'\n});\n\nfunction Posts() {\n  const { loading, error, data } = useQuery(`\n    query Posts {\n      posts {\n        id\n        title\n      }\n    }\n  `);\n\n  if (loading) return <p>Loading...</p>;\n  if (error) return <p>Error: {error.message}</p>;\n\n  return (\n    <ul>\n      {data.posts.map(post => (\n        <li key={post.id}>{post.title}</li>\n      ))}\n    </ul>\n  );\n}\n\nfunction App() {\n  return (\n    <GraphQLProvider client={client}>\n      <Posts />\n    </GraphQLProvider>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"Sets up GraphQLProvider with a client, then uses useQuery to fetch posts."},"warnings":[{"fix":"If you relied on default caching, switch to graphql-hooks-memcache or implement custom cache.","message":"In v6, the default cache is removed; you must provide a cache implementation or use the new minimal mode.","severity":"breaking","affected_versions":">=6.0.0 <7.0.0"},{"fix":"new GraphQLClient({ url, headers: { ... } }) instead of new GraphQLClient(url, headers).","message":"In v8, the client constructor no longer accepts headers as second parameter; use options object.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Use onError: (err, query, variables) => console.error(err) instead.","message":"The `logErrors` option is deprecated and will be removed in v9. Use `onError` callback instead.","severity":"deprecated","affected_versions":">=7.0.0 <9.0.0"},{"fix":"Force refetch by providing a key prop that changes when you want to refetch, or call refetch from the returned object.","message":"useQuery does not refetch on component remount unless you change the key option.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'17/18/19':25 '30kb':34 '3kb':31 'apollo':29,75 'applic':46 'base':6 'beyond':23 'bundl':27 'cach':36 'cadenc':54 'client':8,30 'current':53 'default':41 'definit':49 'depend':22 'everi':57 'extra':21 'gql':66,68 'gql-hook':67 'graphql':1,7,61,64,72 'graphql-hook':63 'graphqlprovid':18 'gzip':32 'hook':2,5,62,65,69,73 'hooks-bas':4 'ideal':42 'introspect':39 'javascript':60 'lightweight':44 'maintain':13 'minim':3 'minor':55 'mit':52 'month':59 'provid':14 'react':10,24,45,71,74 'react-graphql-hook':70 'releas':50,56 'schema':38 'ship':47 'smaller':26 'stabl':12 'typescript':48,76 'usemut':16 'usequeri':15 'v8.2.0':11 'vs':33 'zero':20","created_at":"2026-06-07T16:53:47.828977+00:00","updated_at":"2026-06-07T16:53:47.828977+00:00","problems":[{"fix":"Wrap the component tree with <GraphQLProvider client={client}>.","cause":"Missing GraphQLProvider wrapping a component that uses useQuery.","error":"TypeError: Cannot destructure property 'data' of 'undefined'"},{"fix":"Use ES6 import syntax: import { GraphQLClient } from 'graphql-hooks'.","cause":"Using CommonJS require() in an ESM-only package.","error":"Error: 'graphql-hooks' is not defined"},{"fix":"Ensure all components using hooks are children of <GraphQLProvider>.","cause":"useQuery or useMutation used outside of provider context.","error":"Invariant Violation: Must have a GraphQL client. Wrap your component in a <GraphQLProvider>."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/nearform/graphql-hooks#readme","github":"git://github.com/nearform/graphql-hooks","docs":null,"changelog":null,"pypi":null,"npm":"graphql-hooks","openapi_spec":null,"status_page":null,"smithery":null,"categories":["api"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}