{"id":13438860,"url":"https://github.com/jaydenseric/graphql-react","last_synced_at":"2025-05-15T17:06:09.561Z","repository":{"id":50308408,"uuid":"119938939","full_name":"jaydenseric/graphql-react","owner":"jaydenseric","description":"A GraphQL client for React using modern context and hooks APIs that is lightweight (\u003c 4 kB) but powerful; the first Relay and Apollo alternative with server side rendering.","archived":false,"fork":false,"pushed_at":"2024-07-12T07:44:26.000Z","size":1312,"stargazers_count":722,"open_issues_count":2,"forks_count":22,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-11T23:57:24.023Z","etag":null,"topics":["deno","esm","graphql","hooks","maintained","mjs","node","npm","react","typescript"],"latest_commit_sha":null,"homepage":"https://npm.im/graphql-react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaydenseric.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":".github/funding.yml","license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jaydenseric"}},"created_at":"2018-02-02T05:56:35.000Z","updated_at":"2025-03-04T11:29:01.000Z","dependencies_parsed_at":"2024-11-20T22:29:33.220Z","dependency_job_id":null,"html_url":"https://github.com/jaydenseric/graphql-react","commit_stats":{"total_commits":640,"total_committers":3,"mean_commits":"213.33333333333334","dds":0.004687499999999956,"last_synced_commit":"38a7abcebf7e6d0e4e821c5c3982e8c1cbfae67e"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fgraphql-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fgraphql-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fgraphql-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fgraphql-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaydenseric","download_url":"https://codeload.github.com/jaydenseric/graphql-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254384988,"owners_count":22062422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deno","esm","graphql","hooks","maintained","mjs","node","npm","react","typescript"],"created_at":"2024-07-31T03:01:09.053Z","updated_at":"2025-05-15T17:06:04.538Z","avatar_url":"https://github.com/jaydenseric.png","language":"JavaScript","readme":"![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)\n\n# graphql-react\n\nA [GraphQL](https://graphql.org) client for [React](https://reactjs.org) using modern [context](https://reactjs.org/docs/context) and [hooks](https://reactjs.org/docs/hooks-intro) APIs that’s lightweight (\u003c 4 kB) but powerful; the first [Relay](https://relay.dev) and [Apollo](https://apollographql.com/apollo-client) alternative with server side rendering.\n\nThe [exports](#exports) can also be used to custom load, cache and server side render any data, even from non-[GraphQL](https://graphql.org) sources.\n\n- [Installation](#installation)\n- [Examples](#examples)\n- [Requirements](#requirements)\n- [Exports](#exports)\n\n## Installation\n\n\u003e **Note**\n\u003e\n\u003e For a [Next.js](https://nextjs.org) project, see the [`next-graphql-react`](https://npm.im/next-graphql-react) installation instructions.\n\nFor [Node.js](https://nodejs.org), to install [`graphql-react`](https://npm.im/graphql-react) and its [`react`](https://npm.im/react) peer dependency with [npm](https://npmjs.com/get-npm), run:\n\n```sh\nnpm install graphql-react react\n```\n\nFor [Deno](https://deno.land) and browsers, an example import map (realistically use 4 import maps, with optimal URLs for server vs client and development vs production):\n\n```json\n{\n  \"imports\": {\n    \"extract-files/\": \"https://unpkg.com/extract-files@13.0.0/\",\n    \"graphql-react/\": \"https://unpkg.com/graphql-react@20.0.0/\",\n    \"is-plain-obj\": \"https://unpkg.com/is-plain-obj@4.1.0/index.js\",\n    \"is-plain-obj/\": \"https://unpkg.com/is-plain-obj@4.1.0/\",\n    \"react\": \"https://esm.sh/react@18.2.0\",\n    \"react-waterfall-render/\": \"https://unpkg.com/react-waterfall-render@5.0.0/\"\n  }\n}\n```\n\nThese dependencies might not need to be in the import map, depending on what [`graphql-react`](https://npm.im/graphql-react) modules the project imports from:\n\n- [`extract-files`](https://npm.im/extract-files)\n- [`is-plain-obj`](https://npm.im/is-plain-obj)\n- [`react-waterfall-render`](https://npm.im/react-waterfall-render)\n\nPolyfill any required globals (see [_**Requirements**_](#requirements)) that are missing in your server and client environments.\n\nCreate a single [`Cache`](./Cache.mjs) instance and use the component [`Provider`](./Provider.mjs) to provide it for your app.\n\nTo server side render your app, use the function [`waterfallRender`](https://github.com/jaydenseric/react-waterfall-render#exports) from [`react-waterfall-render`](https://npm.im/react-waterfall-render).\n\n## Examples\n\n- [`graphql-react` examples repo](https://github.com/jaydenseric/graphql-react-examples), a [Deno](https://deno.land) [Ruck](https://ruck.tech) web app deployed at [graphql-react-examples.fly.dev](https://graphql-react-examples.fly.dev).\n- [Official Next.js example](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-react) (often outdated as the Next.js team can be extremely slow to review and merge pull requests).\n\nHere is a basic example using the [GitHub GraphQL API](https://docs.github.com/en/graphql), with tips commented:\n\n```jsx\nimport useAutoLoad from \"graphql-react/useAutoLoad.mjs\";\nimport useCacheEntry from \"graphql-react/useCacheEntry.mjs\";\nimport useLoadGraphQL from \"graphql-react/useLoadGraphQL.mjs\";\nimport useWaterfallLoad from \"graphql-react/useWaterfallLoad.mjs\";\nimport React from \"react\";\n\n// The query is just a string; no need to use `gql` from `graphql-tag`. The\n// special comment before the string allows editor syntax highlighting, Prettier\n// formatting and linting. The cache system doesn’t require `__typename` or `id`\n// fields to be queried.\nconst query = /* GraphQL */ `\n  query ($repoId: ID!) {\n    repo: node(id: $repoId) {\n      ... on Repository {\n        stargazers {\n          totalCount\n        }\n      }\n    }\n  }\n`;\n\nexport default function GitHubRepoStars({ repoId }) {\n  const cacheKey = `GitHubRepoStars-${repoId}`;\n  const cacheValue = useCacheEntry(cacheKey);\n\n  // A hook for loading GraphQL is available, but custom hooks for loading non\n  // GraphQL (e.g. fetching from a REST API) can be made.\n  const loadGraphQL = useLoadGraphQL();\n\n  const load = React.useCallback(\n    () =\u003e\n      // To be DRY, utilize a custom hook for each API your app loads from, e.g.\n      // `useLoadGraphQLGitHub`.\n      loadGraphQL(\n        cacheKey,\n        // Fetch URI.\n        \"https://api.github.com/graphql\",\n        // Fetch options.\n        {\n          method: \"POST\",\n          headers: {\n            \"Content-Type\": \"application/json\",\n            Accept: \"application/json\",\n            Authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,\n          },\n          body: JSON.stringify({\n            query,\n            variables: {\n              repoId,\n            },\n          }),\n        },\n      ),\n    [cacheKey, loadGraphQL, repoId],\n  );\n\n  // This hook automatically keeps the cache entry loaded from when the\n  // component mounts, reloading it if it’s staled or deleted. It also aborts\n  // loading if the arguments change or the component unmounts; very handy for\n  // auto-suggest components!\n  useAutoLoad(cacheKey, load);\n\n  // Waterfall loading can be used to load data when server side rendering,\n  // enabled automagically by `next-graphql-react`. To learn how this works or\n  // to set it up for a non-Next.js app, see:\n  // https://github.com/jaydenseric/react-waterfall-render\n  const isWaterfallLoading = useWaterfallLoad(cacheKey, load);\n\n  // When waterfall loading it’s efficient to skip rendering, as the app will\n  // re-render once this step of the waterfall has loaded. If more waterfall\n  // loading happens in children, those steps of the waterfall are awaited and\n  // the app re-renders again, and so forth until there’s no more loading for\n  // the final server side render.\n  return isWaterfallLoading\n    ? null\n    : cacheValue\n      ? cacheValue.errors\n        ? // Unlike many other GraphQL libraries, detailed loading errors are\n          // cached and can be server side rendered without causing a\n          // server/client HTML mismatch error.\n          \"Error!\"\n        : cacheValue.data.repo.stargazers.totalCount\n      : // In this situation no cache value implies loading. Use the\n        // `useLoadingEntry` hook to manage loading in detail.\n        \"Loading…\";\n}\n```\n\n## Requirements\n\nSupported runtime environments:\n\n- [Node.js](https://nodejs.org) versions `^18.18.0 || ^20.9.0 || \u003e=22.0.0`.\n- [Deno](https://deno.land), importing from a CDN that might require an import map for dependencies.\n- Browsers matching the [Browserslist](https://browsersl.ist) query [`\u003e 0.5%, not OperaMini all, not dead`](https://browsersl.ist/?q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead).\n\nConsider polyfilling:\n\n- [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)\n- [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)\n- [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event)\n- [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)\n- [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)\n- [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)\n- [`performance`](https://developer.mozilla.org/en-US/docs/Web/API/Window/performance)\n\nNon [Deno](https://deno.land) projects must configure [TypeScript](https://typescriptlang.org) to use types from the ECMAScript modules that have a `// @ts-check` comment:\n\n- [`compilerOptions.allowJs`](https://typescriptlang.org/tsconfig#allowJs) should be `true`.\n- [`compilerOptions.maxNodeModuleJsDepth`](https://typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.\n- [`compilerOptions.module`](https://typescriptlang.org/tsconfig#module) should be `\"node16\"` or `\"nodenext\"`.\n\n## Exports\n\nThe [npm](https://npmjs.com) package [`graphql-react`](https://npm.im/graphql-react) features [optimal JavaScript module design](https://jaydenseric.com/blog/optimal-javascript-module-design). It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported via the [`package.json`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):\n\n- [`Cache.mjs`](./Cache.mjs)\n- [`CacheContext.mjs`](./CacheContext.mjs)\n- [`cacheDelete.mjs`](./cacheDelete.mjs)\n- [`cacheEntryDelete.mjs`](./cacheEntryDelete.mjs)\n- [`cacheEntryPrune.mjs`](./cacheEntryPrune.mjs)\n- [`cacheEntrySet.mjs`](./cacheEntrySet.mjs)\n- [`cacheEntryStale.mjs`](./cacheEntryStale.mjs)\n- [`cachePrune.mjs`](./cachePrune.mjs)\n- [`cacheStale.mjs`](./cacheStale.mjs)\n- [`fetchGraphQL.mjs`](./fetchGraphQL.mjs)\n- [`fetchOptionsGraphQL.mjs`](./fetchOptionsGraphQL.mjs)\n- [`HYDRATION_TIME_MS.mjs`](./HYDRATION_TIME_MS.mjs)\n- [`HydrationTimeStampContext.mjs`](./HydrationTimeStampContext.mjs)\n- [`Loading.mjs`](./Loading.mjs)\n- [`LoadingCacheValue.mjs`](./LoadingCacheValue.mjs)\n- [`LoadingContext.mjs`](./LoadingContext.mjs)\n- [`Provider.mjs`](./Provider.mjs)\n- [`types.mjs`](./types.mjs)\n- [`useAutoAbortLoad.mjs`](./useAutoAbortLoad.mjs)\n- [`useAutoLoad.mjs`](./useAutoLoad.mjs)\n- [`useCache.mjs`](./useCache.mjs)\n- [`useCacheEntry.mjs`](./useCacheEntry.mjs)\n- [`useCacheEntryPrunePrevention.mjs`](./useCacheEntryPrunePrevention.mjs)\n- [`useLoadGraphQL.mjs`](./useLoadGraphQL.mjs)\n- [`useLoading.mjs`](./useLoading.mjs)\n- [`useLoadingEntry.mjs`](./useLoadingEntry.mjs)\n- [`useLoadOnDelete.mjs`](./useLoadOnDelete.mjs)\n- [`useLoadOnMount.mjs`](./useLoadOnMount.mjs)\n- [`useLoadOnStale.mjs`](./useLoadOnStale.mjs)\n- [`useWaterfallLoad.mjs`](./useWaterfallLoad.mjs\")\n","funding_links":["https://github.com/sponsors/jaydenseric"],"categories":["HarmonyOS","JavaScript"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fgraphql-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaydenseric%2Fgraphql-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fgraphql-react/lists"}