{"id":13479190,"url":"https://github.com/jotaijs/jotai-apollo","last_synced_at":"2025-04-14T22:22:39.045Z","repository":{"id":45854184,"uuid":"432942773","full_name":"jotaijs/jotai-apollo","owner":"jotaijs","description":"Apollo graphql client integration for jotai :rocket: :ghost: ","archived":false,"fork":false,"pushed_at":"2023-08-18T08:39:59.000Z","size":116,"stargazers_count":52,"open_issues_count":4,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T10:21:21.140Z","etag":null,"topics":["apollo","apollo-client","apollo-graphql","integration","jotai","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/jotaijs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["aslemammad"],"patreon":null,"open_collective":"jotai","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-11-29T07:24:32.000Z","updated_at":"2025-02-19T12:43:55.000Z","dependencies_parsed_at":"2024-01-16T06:21:22.808Z","dependency_job_id":"768c7e30-53d7-4e3f-883b-820343759a00","html_url":"https://github.com/jotaijs/jotai-apollo","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-apollo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-apollo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-apollo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-apollo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jotaijs","download_url":"https://codeload.github.com/jotaijs/jotai-apollo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248969272,"owners_count":21191226,"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":["apollo","apollo-client","apollo-graphql","integration","jotai","react"],"created_at":"2024-07-31T16:02:11.137Z","updated_at":"2025-04-14T22:22:39.015Z","avatar_url":"https://github.com/jotaijs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/aslemammad","https://opencollective.com/jotai"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Jotai Apollo 🚀👻\n\n[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=discord\u0026logo=discord\u0026logoColor=ffffff)](https://discord.gg/poimandres)\n\nMinimal `@apollo/client` integration for jotai, similar to `jotai/urql`.\n\n## Install\n\nYou have to install `@apollo/client` and `jotai` to access this bundle and its functions.\n\n```\nyarn add jotai-apollo jotai @apollo/client\n```\n\n## atomsWithQuery\n\n`atomsWithQuery` creates two atoms with a query. It internally uses [client.watchQuery](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.watchQuery).\n\n```ts\nimport { useAtom } from 'jotai'\nimport { ApolloClient, gql } from '@apollo/client'\nimport { atomsWithQuery } from 'jotai-apollo'\n\nconst client = new ApolloClient({ ... })\n\nconst query = gql`\n  query Count {\n    getCount {\n      count\n    }\n  }\n`\nconst [countAtom, countStatusAtom] = atomsWithQuery(\n  (get) =\u003e ({\n    query\n  }),\n  () =\u003e client, // optional\n)\n\nconst App = () =\u003e {\n  const [data] = useAtom(countAtom)\n  return \u003cdiv\u003e{JSON.stringify(data)}\u003c/div\u003e\n}\n```\n\ntype:\n\n```ts\nexport const atomsWithQuery = \u003c\n  Data,\n  Variables extends object = OperationVariables\n\u003e(\n  getArgs: (get: Getter) =\u003e QueryArgs\u003cVariables, Data\u003e,\n  getClient: (get: Getter) =\u003e ApolloClient\u003cany\u003e = (get) =\u003e get(clientAtom)\n): readonly [\n  dataAtom: WritableAtom\u003cData, AtomWithQueryAction\u003e,\n  statusAtom: WritableAtom\u003cApolloQueryResult\u003cData\u003e, AtomWithQueryAction\u003e\n]\n```\n\n### Examples\n\n[Rick \u0026 Morty characters](https://stackblitz.com/edit/react-ts-wjkdmk?file=index.tsx)\n\n## atomsWithMutation\n\n`atomsWithMutation` creates two atoms with a mutation. It internally uses [client.mutate](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.mutate).\n\n```js\nimport { useAtom } from 'jotai'\nimport { ApolloClient, gql } from '@apollo/client'\nimport { atomsWithMutation } from 'jotai-apollo'\n\nconst client = new ApolloClient({ ... })\n\nconst mutation = gql`\n  mutation Count {\n    setCount {\n      count\n    }\n  }\n`\n\nconst [countAtom, countStatusAtom] = atomsWithMutation(\n  (get) =\u003e ({\n    mutation\n  }),\n  () =\u003e client,\n)\n\nconst App = () =\u003e {\n  const [data, mutate] = useAtom(countAtom)\n  return \u003cdiv\u003e{JSON.stringify(data)} \u003cbutton onClick={mutate}\u003eClick me\u003c/button\u003e\u003c/div\u003e\n}\n```\n\ntype:\n\n```ts\nexport function atomsWithMutation\u003c\n  Data = any,\n  Variables = OperationVariables,\n  Context = DefaultContext,\n  Extensions = Record\u003cstring, any\u003e,\n  Result extends FetchResult\u003cData, Context, Extensions\u003e = FetchResult\u003c\n    Data,\n    Context,\n    Extensions\n  \u003e\n\u003e(\n  getClient: (get: Getter) =\u003e ApolloClient\u003cany\u003e = (get) =\u003e get(clientAtom)\n): readonly [\n  dataAtom: WritableAtom\u003cData, Action\u003cData, Variables, Context\u003e, Promise\u003cvoid\u003e\u003e,\n  statusAtom: WritableAtom\u003c\n    Result,\n    Action\u003cData, Variables, Context\u003e,\n    Promise\u003cvoid\u003e\n  \u003e\n]\n```\n\n### Examples\n\nContributions are welcome.\n\n## atomsWithSubscription\n\n`atomsWithSubscription` creates two atoms with a mutation. It internally uses [client.subscribe](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.subscribe).\n\n```js\nimport { useAtom } from 'jotai'\nimport { ApolloClient, gql } from '@apollo/client'\nimport { atomsWithSubscription } from 'jotai-apollo'\n\nconst client = new ApolloClient({ ... })\n\nconst subscription = gql`\n  subscription Count {\n    getCount {\n      count\n    }\n  }\n`\n\nconst [countAtom, countStatusAtom] = atomsWithSubscription(\n  (get) =\u003e ({\n    query: subscription\n  }),\n  () =\u003e client\n)\n\nconst App = () =\u003e {\n  const [data] = useAtom(countAtom)\n  return \u003cdiv\u003e{JSON.stringify(data)}\u003c/div\u003e\n}\n```\n\ntype:\n\n```ts\nexport function atomsWithSubscription\u003c\n  Data,\n  Variables extends object = OperationVariables\n\u003e(\n  getArgs: (get: Getter) =\u003e SubscriptionOptions\u003cVariables, Data\u003e,\n  getClient: (get: Getter) =\u003e ApolloClient\u003cany\u003e = (get) =\u003e get(clientAtom)\n): readonly [\n  dataAtom: WritableAtom\u003cData, Action\u003e,\n  statusAtom: WritableAtom\u003cSubscriptionResult\u003cData, Variables\u003e, Action\u003e\n]\n```\n\n### Examples\n\nContributions are welcome.\n\n### Contributing\n\nIf you have found what you think is a bug/feature, please [file an issue](https://github.com/pmndrs/jotai-apollo/issues/new).\n\nFor questions around this integration, prefer [starting a discussion](https://github.com/pmndrs/jotai-apollo/discussions/new).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjotaijs%2Fjotai-apollo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjotaijs%2Fjotai-apollo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjotaijs%2Fjotai-apollo/lists"}