{"id":13683570,"url":"https://github.com/CannerCMS/apollo-link-firebase","last_synced_at":"2025-04-30T13:31:20.720Z","repository":{"id":57182324,"uuid":"123557208","full_name":"CannerCMS/apollo-link-firebase","owner":"CannerCMS","description":":fire: :link: apollo-link-firebase provides you a simple way to use Firebase with graphQL.","archived":true,"fork":false,"pushed_at":"2019-05-08T14:38:51.000Z","size":275,"stargazers_count":408,"open_issues_count":2,"forks_count":26,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-05-23T04:40:41.893Z","etag":null,"topics":["apollo-client","apollo-link","firebase","graphql"],"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/CannerCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-02T09:10:03.000Z","updated_at":"2024-03-29T04:01:45.000Z","dependencies_parsed_at":"2022-09-12T23:50:31.652Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/apollo-link-firebase","commit_stats":null,"previous_names":["canner/apollo-link-firebase"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fapollo-link-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fapollo-link-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fapollo-link-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fapollo-link-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/apollo-link-firebase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222873150,"owners_count":17050758,"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-client","apollo-link","firebase","graphql"],"created_at":"2024-08-02T13:02:15.832Z","updated_at":"2024-11-12T03:31:27.433Z","avatar_url":"https://github.com/CannerCMS.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ca href=\"https://www.canner.io\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/26116324/37811194-a316caac-2e93-11e8-858b-eff589dcfdf3.png\" /\u003e\u003c/a\u003e\n\n[![npm version](https://badge.fury.io/js/apollo-link-firebase.svg)](https://badge.fury.io/js/apollo-link-firebase) [![CircleCI](https://circleci.com/gh/Canner/apollo-link-firebase.svg?style=shield)](https://circleci.com/gh/Canner/apollo-link-firebase) [![gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/Canner/apollo-link-firebase)\n\n## Apollo-link-firebase\napollo-link-firebase provides you a simple way to query Firebase in graphQL with [Apollo-client](https://www.apollographql.com/client/) **without building a graphQL server**\n\nCurrently, we support features below:\n\n1. **Query**: All sorting and filtering methods on [document](https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data) are supported.\n1. **Mutation**: deal with `set`, `update`, `remove` methods with graphQL mutation.\n1. **Realtime Subscription**: Listen to your [Firebase events](https://firebase.google.com/docs/database/web/lists-of-data#listen_for_child_events) using graphQL Subscription.\n1. **Data Join**: Retrieve your data from different paths using **one graphQL**.\n\n## Contents\n* [Installation](#installation)\n* [Quickstart](#quickstart)\n* [Retrieve Object Data](#retrieve-object-data)\n* [Work With Lists of Data](#work-with-lists-of-data)\n* [Mutation](#mutation)\n* [Subscription](#subscription)\n* [Example](#example)\n\n## Installation\n``` console\nyarn add apollo-link-firebase\n```\n\n## Quickstart\n``` typescript\n// rtdb stands for realtime database\nimport {createRtdbLink} from 'apollo-link-firebase';\nimport * as firebase from 'firebase';\n\n// initialize firebase\nfirebase.initializeApp({\n  // configs\n});\n\n// create Realtime Database link\nconst rtdbLink = createRtdbLink({\n  database: firebase.database()\n});\n\nconst client = new ApolloClient({\n  link: rtdbLink,\n  cache: new InMemoryCache(),\n});\n\n// A simple query to retrieve data from \n// firebase.database().ref(\"/profile/me\")\n// @rtdbQuery stands for Realtime Database Query\nconst query = gql`\n  query myProfile {\n    me @rtdbQuery(ref: \"/profile/me\") {\n      name\n    }\n  }\n`;\n\n// Invoke the query and log the person's name\nclient.query({ query }).then(response =\u003e {\n  console.log(response.data.name);\n});\n```\n\n## Retrieve Object Data\n### Return with __typename\nIn Apollo client, `InMemoryCache` use `__typename` and `id` to save your data in store.\n\nUsing `@key` directive, you can speficy which field you want to return with the [key of snapshot](https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot?authuser=0#key)\n``` js\nconst query = gql`\n  query myProfile {\n    me @rtdbQuery(ref: \"/profile/me\", type: \"Profile\") {\n      id @key\n      name\n    }\n  }\n`;\n```\n#### Response\n``` js\n{\n  __typename: \"Profile\",\n  id: \"me\",\n  name: \"wwwy3y3\"\n}\n```\n\n## Work with Lists of Data\nFor example, your data in Firebase could be like\n``` js\n{\n  users: {\n    id1: {\n      name: \"alovelace\",\n      birth: 1815\n    },\n    id2: {\n      name: \"ghopper\",\n      birth: 1906\n    }\n  }\n}\n```\n\n### Basic Query\nWe can query all users, and use `@array` directive to parse data to array\n``` js\nconst query = gql`\n  query getUsers {\n    users @rtdbQuery(ref: \"/users\", type: \"Users\") @array {\n      id @key\n      name\n    }\n  }\n`;\n```\n#### Response\n``` js\n[{\n  __typename: \"Users\",\n  id: \"id1\",\n  name: \"alovelace\",\n  birth: 1815\n}, {\n  __typename: \"Users\",\n  id: \"id2\",\n  name: \"ghopper\",\n  birth: 1906\n}]\n```\n\n### Advance Query\nIn firebase client js sdk, We can get data by using [sorting and filtering API](https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data)\n\nWe provide corresponding API in `@rtdbQuery` directive arguments. In the following example, we query lists of data using `orderByChild(\"birth\")` and `limitToFirst(1)`\n``` js\nconst query = gql`\n  query getUsers {\n    users @rtdbQuery(ref: \"/users\", orderByChild: \"birth\", limitToFirst: 1, type: \"Users\") {\n      name\n    }\n  }\n`;\n```\n\n#### Response\n``` js\n[{\n  __typename: \"Users\",\n  id: \"id1\",\n  name: \"alovelace\",\n  birth: 1815\n}]\n```\n\n### rtdbQuery Directive Arguments\n* `ref`: string\n* `orderByChild`: string\n* `orderByKey`: boolean. e,g `orderByKey: true`\n* `orderByValue`: boolean\n* `startAt`: any\n* `endAt`: any\n* `equalTo`: any\n* `limitToFirst`: number\n* `limitToLast`: number\n\n### More Examples\n* [Basic API Usage](https://github.com/Canner/apollo-link-firebase/wiki/Simple-Query-Example) (orderBy*, limitTo*...)\n* [Advanced API Usage](https://github.com/Canner/apollo-link-firebase/wiki/Advance-Query) (nested array, data join...)\n\n## Mutation\nWe only take payload from `input` key from the recommendations in this [article](https://dev-blog.apollodata.com/designing-graphql-mutations-e09de826ed97)\n\n``` js\nconst mutation = gql`\n  fragment Input on firebase {\n    string: String\n    number: Number\n  }\n\n  mutation($ref: string, $input: Input!) {\n    updateArticle(input: $input) @rtdbUpdate(ref: $ref, type: \"Article\") {\n      id @key\n      string\n      number\n    }\n  }\n`;\n```\n\nWe support four directives for mutation\n* `@rtdbUpdate`: Firebase [update](https://firebase.google.com/docs/reference/js/firebase.database.Reference?authuser=0#update)\n* `@rtdbSet`: Firebase [set](https://firebase.google.com/docs/reference/js/firebase.database.Reference?authuser=0#set)\n* `@rtdbRemove`: Firebase [remove](https://firebase.google.com/docs/reference/js/firebase.database.Reference?authuser=0#remove)\n* `@rtdbPush`: Push new element under ref, sugar api for firebase [push and set](https://firebase.google.com/docs/reference/js/firebase.database.Reference?authuser=0#push)\n### Examples\n#### @rtdbRemove\n``` js\nconst mutation = gql`\n  mutation($ref: string) {\n    remove @rtdbRemove(ref: $ref)\n  }\n`;\n```\n\n#### @rtdbPush and @pushKey\n``` js\nconst mutation = gql`\n  fragment ProfileInput on firebase {\n    string: String\n    number: Number\n  }\n\n  mutation($ref: string, $input: ProfileInput!) {\n    pushdata(input: $input) @rtdbPush(ref: $ref) {\n      id @pushKey\n      string\n      number\n    }\n  }\n`;\n\n// variables\nconst variables = {\n  ref: \"/users\",\n  input: {\n    string: \"string\",\n    number: 1\n  }\n}\n\n// response\n{\n  id: \"-KjCIvxsKueb3Hf2LIOp\",\n  string: \"string\",\n  number: 1\n}\n```\n\n## Subscription\nWe support four events in Firebase, more on [Firebase document](https://firebase.google.com/docs/database/web/lists-of-data?authuser=0#listen_for_child_events)\n\nYou can use all the query api supported in `@rtdbQuery`, more advanced query examples in [wiki](https://github.com/Canner/apollo-link-firebase/wiki/Advance-Query)\n### Usage\n``` js\nconst subQuery = gql`\n  subscription {\n    newComment @rtdbSub(ref: \"/comments\", event: \"value\") {\n      id @key\n      content\n    }\n  }\n`;\n```\n### Directives\n* `value`: `@rtdbSub(ref: string, event: \"value\")`\n* `child_added`: `@rtdbSub(ref: string, event: \"child_added\")`\n* `child_changed`: `@rtdbSub(ref: string, event: \"child_changed\")`\n* `child_removed`: `@rtdbSub(ref: string, event: \"child_removed\")`\n\n## Example\n### Simple Todo React Application\n[![](https://i.imgur.com/rlCTO4V.png)](https://github.com/Canner/apollo-link-firebase/tree/master/examples/simple-todo)\nHere's a simple [React + apollo-link-firebase todo app](https://github.com/Canner/apollo-link-firebase/tree/master/examples/simple-todo)\n\n\n## Roadmap\n* support firebase transaction\n* support firestore\n* support authenticate mutation\n* support storage mutation\n\n## Contribution\nContributions are **welcome and extremely helpful** 🙌\n\nFeel free to join [our gitter channel](https://gitter.im/Canner/apollo-link-firebase) to discuss with us!\n\n[![](https://user-images.githubusercontent.com/26116324/37811196-a437d930-2e93-11e8-97d8-0653ace2a46d.png)](https://www.canner.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCannerCMS%2Fapollo-link-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCannerCMS%2Fapollo-link-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCannerCMS%2Fapollo-link-firebase/lists"}