{"id":13499141,"url":"https://github.com/kadirahq/lokka","last_synced_at":"2025-05-14T22:08:03.642Z","repository":{"id":48791412,"uuid":"47877423","full_name":"kadirahq/lokka","owner":"kadirahq","description":"Simple JavaScript Client for GraphQL","archived":false,"fork":false,"pushed_at":"2017-07-31T15:27:50.000Z","size":49,"stargazers_count":1530,"open_issues_count":35,"forks_count":61,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-04-13T18:44:37.938Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/kadirahq.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-12-12T12:31:23.000Z","updated_at":"2025-02-11T21:32:17.000Z","dependencies_parsed_at":"2022-09-05T22:51:05.354Z","dependency_job_id":null,"html_url":"https://github.com/kadirahq/lokka","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadirahq%2Flokka","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadirahq%2Flokka/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadirahq%2Flokka/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadirahq%2Flokka/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kadirahq","download_url":"https://codeload.github.com/kadirahq/lokka/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254235696,"owners_count":22036963,"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-07-31T22:00:29.840Z","updated_at":"2025-05-14T22:07:58.633Z","avatar_url":"https://github.com/kadirahq.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript","GraphQL Tool, Libraries, and Frameworks"],"sub_categories":["JavaScript Libraries"],"readme":"# lokka\n\nSimple GraphQL client for JavaScript. \n\nWorks on all the JavaScript environments including **Browser**, **NodeJS** and **React Native**.\n\n## TOC\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Core API](#core-api)\n* [Cache API](#cache-api)\n* [Available Transports](#available-transports)\n* [Demo Apps](#demo-apps)\n* [Future Development](#future-development)\n\n## Installation\n\nInstall lokka and a transport layer:\n\n```\nnpm i --save lokka lokka-transport-http\n```\n\n\u003e Here we'll be using Lokka's [HTTP transport layer](https://github.com/kadirahq/lokka-transport-http) which is compatible with [express-graphql](https://github.com/graphql/express-graphql).\n\n## Usage\n\nWe can initialize a Lokka client like this:\n\n```js\nconst Lokka = require('lokka').Lokka;\nconst Transport = require('lokka-transport-http').Transport;\n\nconst client = new Lokka({\n  transport: new Transport('http://graphql-swapi.parseapp.com/')\n});\n```\n\n\u003e Here we connect lokka to Facebook's [SWAPI GraphQL Demo](http://graphql-swapi.parseapp.com/).\n\n## Core API\n\n### Basic Querying\n\nThen you can invoke a simple query like this:\n(This query will get titles of all the Star Wars films)\n\n```js\nclient.query(`\n    {\n      allFilms {\n        films {\n          title\n        }\n      }\n    }\n`).then(result =\u003e {\n    console.log(result.allFilms);\n});\n```\n\n### Using Fragments\n\nYou can also create fragments and use inside queries.\n\nLet's define a fragment for the `Film` type.\n\n```js\nconst filmInfo = client.createFragment(`\n  fragment on Film {\n    title,\n    director,\n    releaseDate\n  }\n`);\n```\n\n\u003e NOTE: Here's you don't need to give a name to the fragment\n\nLet's query all the films using the above fragment:\n\n```js\nclient.query(`\n  {\n    allFilms {\n      films {\n        ...${filmInfo}\n      }\n    }\n  }\n`).then(result =\u003e {\n  console.log(result.allFilms.films);\n});\n```\n\n\u003e We can also use fragments inside fragments as well. Lokka will resolve fragments in nested fashion.\n\n### Mutations\n\nGraphQL Swapi API, does not have mutations. If we had mutations we could invoke them like this:\n\n```js\nclient.mutate(`{\n    newFilm: createMovie(\n        title: \"Star Wars: The Force Awakens\",\n        director: \"J.J. Abrams\",\n        producers: [\n            \"J.J. Abrams\", \"Bryan Burk\", \"Kathleen Kennedy\"\n        ],\n        releaseDate: \"December 14, 2015\"\n    ) {\n        ...${filmInfo}\n    }\n}`).then(response =\u003e {\n    console.log(response.newFilm);\n});\n```\n\nTo send mutations with variable, invoke them like this:\n```js\nconst mutationQuery = `($input: SomeVarType!){\n    newData: createData($input) {\n        ...${someInfo}\n    }\n}`;\n\nconst vars = {\n  input: 'some data here',\n};\n\nclient.mutate(mutationQuery, vars).then(resp =\u003e {\n    console.log(resp.newFilm);\n});\n```\n\n\u003e Normally, when we are sending a GraphQL mutation we write it like below:\n\u003e\n\u003e ```\n\u003e mutation someNameForRequest ($vars: SomeVarType) {\n\u003e   newFilm: createMovie(...) {\n\u003e     ...\n\u003e   }\n\u003e }\n\u003e ```\n\u003e\n\u003e But with lokka, you don't need to write `mutation someNameForRequest` part. Lokka will add it for you.\n\n### Query Variables\n\nWe can use [query variables](https://learngraphql.com/basics/query-variables) when querying the schema.\n\n```js\nconst query = `\n  query sumNow($a: Int, $b: Int) {\n    sum(a: $a, b: $b)\n  }\n`;\n\nconst vars = {a: 10, b: 30};\nclient.query(query, vars).then(result =\u003e {\n  console.log(result.sum);\n});\n```\n\n## Cache API\n\nLokka has a built in cache. But it won't be used when you are invoking the core API. For that, you need to use following APIs:\n\n### Lokka.watchQuery()\n\nThis API allows to watch a query. First it will fetch the query and cache it. When the cache updated, it'll notify the change. Here's how to use it.\n\n```js\n// create a query with query variables (query variables are not mandatory)\nconst query = `\n  query _($message: String!) {\n    echo(message: $message)\n  }\n`;\n// object pass as the query variables\nconst vars = {message: 'Hello'};\n\n// create a lokka client with a transport\nconst client = new Lokka({...});\n\n// watch the query\nconst watchHandler = (err, payload) =\u003e {\n  if (err) {\n    console.error(err.message);\n    return;\n  }\n\n  console.log(payload.echo);\n};\nconst stop = client.watchQuery(query, vars, watchHandler);\n\n// stop watching after a minute\nsetTimeout(stop, 1000 * 60);\n```\n\n\n### Lokka.refetchQuery()\n\nRefetch a given query and update the cache:\n\n```js\nclient.refetchQuery(query, {message: 'Hello Again'});\n```\n\nThis will notify all the watch handlers registered with `BlogSchema.watchQuery`.\n\n### Lokka.cache.getItemPayload()\n\nGet the item inside the cache for a query.\n\n```js\nconst payload = client.cache.getItemPayload(query, vars);\n```\n\n### Lokka.cache.setItemPayload()\n\nSet the item inside the cache. New value will be send to all registered watch handlers.\n\n```js\nclient.cache.setItemPayload(query, vars, payload);\n```\n\n\u003e Payload must to identical to what's receive from the GraphQL.\n\n### Lokka.cache.removeItem()\n\nWith this we can remove the query and vars combo from the cache. But this won't notify watch handers.\n\n```js\nclient.cache.removeItem(query, vars);\n```\n\n### Lokka.cache.fireError()\n\nFire an error for all the registered watchHandlers.\n\n```js\nclient.cache.fireError(query, vars, new Error('some error'));\n```\n\n## Available Transports\n\n* [HTTP Transport](https://github.com/kadirahq/lokka-transport-http)\n* [Basic Auth HTTP Transport](https://github.com/kadirahq/lokka-transport-http-auth)\n* [JWT Auth HTTP Transport](https://github.com/kadirahq/lokka-transport-jwt-auth)\n* [Local GraphQLSchema Transport](https://github.com/truebill/lokka-transport-graphql-js)\n\n## Demo Apps\n\nHave a look at some sample apps:\n\n* [Client Side App](https://github.com/kadira-samples/react-graphql-todos)\n* [React Native App](https://github.com/kadira-samples/react-native-graphql-demo)\n* [Blog App with Meteor](https://github.com/kadira-samples/meteor-graphql-demo)\n\n## Future Development\n\nIn this version of lokka, it's just a basic API where you can query against a GraphQL Schema. This API is stable.\n\nWe'll have more features in the future versions of lokka.\n\n* 1.x.x - Query/Mutate against a GraphQL schema.\n  * support for query variables.\n  * query watching support.\n  * [current] basic client side cache.\n* 2.x.x - Client side query validations.\n* 3.x.x - Client side smart cache.\n* 4.x.x - Subscriptions Support.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadirahq%2Flokka","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkadirahq%2Flokka","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadirahq%2Flokka/lists"}