{"id":19290700,"url":"https://github.com/jacob-ebey/micro-graphql-monorepo","last_synced_at":"2025-04-22T06:31:12.934Z","repository":{"id":43531169,"uuid":"240116665","full_name":"jacob-ebey/micro-graphql-monorepo","owner":"jacob-ebey","description":"A tiny, simple to use GraphQL client with SSR support.","archived":false,"fork":false,"pushed_at":"2022-12-12T02:14:34.000Z","size":6780,"stargazers_count":12,"open_issues_count":22,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T20:12:39.840Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jacob-ebey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-12T21:14:40.000Z","updated_at":"2022-10-07T18:25:56.000Z","dependencies_parsed_at":"2023-01-27T11:00:28.735Z","dependency_job_id":null,"html_url":"https://github.com/jacob-ebey/micro-graphql-monorepo","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fmicro-graphql-monorepo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fmicro-graphql-monorepo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fmicro-graphql-monorepo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fmicro-graphql-monorepo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacob-ebey","download_url":"https://codeload.github.com/jacob-ebey/micro-graphql-monorepo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250183125,"owners_count":21388660,"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":[],"created_at":"2024-11-09T22:21:27.358Z","updated_at":"2025-04-22T06:31:12.599Z","avatar_url":"https://github.com/jacob-ebey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Micro GraphQL [![codecov](https://codecov.io/gh/jacob-ebey/micro-graphql-monorepo/branch/master/graph/badge.svg)](https://codecov.io/gh/jacob-ebey/micro-graphql-monorepo)\n\nA tiny, simple to use GraphQL client with SSR support, a normalized cache, and support for global state management.\n\n## Bundle sizes\n\n- **@micro-graphql/core:** ![npm bundle size](https://img.shields.io/bundlephobia/min/@micro-graphql/core?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@micro-graphql/core?style=flat-square)\n- **@micro-graphql/hooks:** ![npm bundle size](https://img.shields.io/bundlephobia/min/@micro-graphql/hooks?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@micro-graphql/hooks?style=flat-square)\n\n## Full examples\n\n- NEXT.js with SSR and hydration [EXAMPLE](https://github.com/jacob-ebey/micro-graphql-monorepo/tree/master/packages/next-example)\n- Create React App [EXAMPLE](https://github.com/jacob-ebey/micro-graphql-monorepo/tree/master/packages/cra-example), [PLAYGROUND](https://codesandbox.io/s/github/jacob-ebey/micro-graphql-monorepo/tree/master/packages/cra-example)\n\n## Overview\n\n### useQuery\n\n```jsx\nconst { data, errors, loading } = useQuery(\n  YOUR_QUERY,\n  React.useMemo(\n    () =\u003e ({\n      example: variable\n    }),\n    [variable]\n  )\n);\n```\n\n### useMutation\n\n```jsx\nconst [{ data, errors, loading }, mutate] = useMutation(\n  YOUR_MUTATION,\n  React.useMemo(\n    () =\u003e ({\n      example: variable\n    }),\n    [variable]\n  )\n);\n\nreturn \u003cbutton onClick={mutate}\u003eRun mutation\u003c/button\u003e;\n```\n\n## React quickstart\n\nInstall the required packages:\n\n```shell\n\u003e yarn add @micro-graphql/core @micro-graphql/hooks\n```\n\nWrap your app in a client provider and you can use the hooks in any child component.\n\n```jsx\nimport React from 'react';\nimport gql from 'graphql-tag';\nimport { createCache, createClient } from '@micro-graphql/core';\nimport { MicroGraphQLProvider, useQuery } from '@micro-graphql/hooks';\nimport merge from 'deepmerge';\n\nconst microClient = createClient({\n  fetch,\n  cache: createCache(),\n  url: \"https://swapi-graphql.netlify.com/.netlify/functions/index\"\n});\n\nconst HOME_QUERY = gql`\n  query ExampleQuery($id: ID) {\n    film(id: $id) {\n      id\n      title\n    }\n    allFilms {\n      films {\n        id\n        title\n      }\n    }\n  }\n`;\n\nconst HOME_CLIENT_QUERY = gql`\n  query HomeClient {\n    home {\n      selectedEpisode\n    }\n  }\n`;\n\nconst Home = () =\u003e {\n  const [clientData, setClientData] = useClientQuery(\n    HOME_CLIENT_QUERY,\n    undefined,\n    {\n      home: {\n        __typename: 'Home',\n        selectedEpisode: 'ZmlsbXM6MQ=='\n      }\n    }\n  );\n\n  const handleEpisodeChanged = React.useCallback(\n    (event) =\u003e {\n      event.preventDefault();\n\n      setClientData(\n        merge(clientData, {\n          home: {\n            selectedEpisode: event.target.value\n          }\n        })\n      );\n    },\n    [clientData, setClientData]\n  );\n\n  const { data, errors, loading } = useQuery(\n    HOME_QUERY\n    React.useMemo(\n      () =\u003e ({\n        id: clientData.home.selectedEpisode\n      }),\n      [clientData]\n    )\n  );\n\n  const selector =\n    data \u0026\u0026 data.allFilms \u0026\u0026 data.allFilms.films ? (\n      \u003cselect defaultValue={`${clientData.home.selectedEpisode}`} onChange={handleEpisodeChanged}\u003e\n        {data.allFilms.films.map(({ title, id }) =\u003e (\n          \u003coption key={id} value={`${id}`}\u003e\n            {title || id}\n          \u003c/option\u003e\n        ))}\n      \u003c/select\u003e\n    ) : null;\n\n  if (loading) {\n    return (\n      \u003cReact.Fragment\u003e\n        {selector}\n        \u003ch1\u003eLoading........\u003c/h1\u003e\n      \u003c/React.Fragment\u003e\n    );\n  }\n\n  if (errors) {\n    return (\n      \u003cReact.Fragment\u003e\n        {selector}\n        \u003ch1\u003eErrors...\u003c/h1\u003e\n        \u003cpre\u003e\n          \u003ccode\u003e{JSON.stringify(errors, null, 2)}\u003c/code\u003e\n        \u003c/pre\u003e\n      \u003c/React.Fragment\u003e\n    );\n  }\n\n  return (\n    \u003cReact.Fragment\u003e\n      {selector}\n      \u003ch1\u003eData!!!\u003c/h1\u003e\n      \u003cpre\u003e\n        \u003ccode\u003e{JSON.stringify(data, null, 2)}\u003c/code\u003e\n      \u003c/pre\u003e\n    \u003c/React.Fragment\u003e\n  );\n};\n\nconst App = () =\u003e (\n  \u003cMicroGraphQLProvider client={microClient}\u003e\n    \u003cHome /\u003e\n  \u003c/MicroGraphQLProvider\u003e\n);\n\nexport default App;\n```\n\n## Contributors\n\nThe release process is currently manual and is done by running:\n\n```bash\n\u003e yarn pub\n```\n\nThis will build, version, tag and publish the packages to npm.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacob-ebey%2Fmicro-graphql-monorepo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacob-ebey%2Fmicro-graphql-monorepo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacob-ebey%2Fmicro-graphql-monorepo/lists"}