{"id":17347229,"url":"https://github.com/rodentman87/mobql","last_synced_at":"2025-10-06T15:11:31.197Z","repository":{"id":48863148,"uuid":"347533544","full_name":"Rodentman87/mobql","owner":"Rodentman87","description":"Data loader that grabs properties as you need them","archived":false,"fork":false,"pushed_at":"2021-08-18T05:29:11.000Z","size":336,"stargazers_count":20,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T09:11:15.340Z","etag":null,"topics":["mobx","state-management"],"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/Rodentman87.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":"2021-03-14T03:17:57.000Z","updated_at":"2021-09-21T21:54:38.000Z","dependencies_parsed_at":"2022-09-03T14:21:12.035Z","dependency_job_id":null,"html_url":"https://github.com/Rodentman87/mobql","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rodentman87%2Fmobql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rodentman87%2Fmobql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rodentman87%2Fmobql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rodentman87%2Fmobql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rodentman87","download_url":"https://codeload.github.com/Rodentman87/mobql/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961186,"owners_count":21189991,"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":["mobx","state-management"],"created_at":"2024-10-15T16:48:01.627Z","updated_at":"2025-10-06T15:11:26.149Z","avatar_url":"https://github.com/Rodentman87.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![npm](https://img.shields.io/npm/v/mobql?style=flat-square)\n\n# MobQL\n\nThis is a little beta side project I've been working on. It allows you to define your data and how to get it from your GraphQL schema, then it will load properties as you access them, allowing you to not need to worry about designing your queries. No more having to modify your query to include a new property _and_ update your code to use it. You just use it and it will load anything it needs to from the server. Best part, the cache can still be updated just like normal MobX objects, allowing you to use whatever event system you want to update your cache in real time.\n\n## You can read a better formatted version of the docs on GitBook [here](https://rodentman87.gitbook.io/mobql/)\n\n## So how do I use it?\n\nInstall it with yarn or npm\n\n```sh\nnpm install mobql --save\n\nyarn add mobql\n```\n\nThen follow the steps below to get your data ready to go. You can also take a look at the two quick example projects in the /examples directory. (Store.ts in each of these is the important bit).\n\n### Step 1 - Define your data\n\nDefine you data as a class, generally you'll be extending `DataLoadedListEntry` as that represents an instance of an object like a User or Post with a unique ID. `DataLoadedObject` is used for a static set of properties such as a global config where there's only once instance of that object on the API. `NestedObject` is used for when you have nested data that isn't considered to be a part of another object, something like `name { first, last }` on a `User`.\n\n```ts\nclass Continent extends DataLoadedListEntry {\n  name: string | null = null;\n  code: string;\n  @MobQLArrayListObject(\"Country\")\n  countries: Country[] = [];\n\n  constructor(id: string, manager: DataLoadedListEntryManager\u003cany\u003e) {\n    super(manager);\n    this.code = id;\n  }\n\n  getId(): string {\n    return this.code;\n  }\n}\n```\n\nWhen referencing another `DataLoaded...` thing in a property, make sure to decorate it so that MobQL knows what to look for.\n\n**(!) Make sure to initialize any `NestedObject`s in your class's constructor, as well as intialize any arrays of `DataLoadedListEntry`s as empty arrays, everything else should be `type | null = null`. This allows you to access the properties right away.**\n\n**(!) Extremely important: Do not make any properties optional as this causes issues with the reflection used to set up the objects**\n\n### Step 2 - Make your data loader\n\nThis package doesn't require the use of any specific graphql client, all you need to do is make a DataLoader that will take a query and variables then return the result that your graphql library gives.\n\n```ts\nclass MyDataLoader extends DataLoader {\n  async runQuery(query: string, variables: any): Promise\u003cany\u003e {\n    let output;\n    try {\n      output = await request(\n        \"https://countries.trevorblades.com/graphql\",\n        query,\n        variables\n      );\n    } catch (e) {\n      console.log(e);\n    }\n    // Make sure that your output puts the data in the data property of the return value, in the future other properties will be used for other data\n    return { data: output };\n  }\n}\n```\n\nIn the example I use `graphql-request` for a quick and simple query runner.\n\n### Step 3 - Register your models\n\nYou'll now register all your models with an ObjectManager, this is what allows your objects to reference each other as well as handles creation and serving of these object for you.\n\n```ts\nconst objectManager = new ObjectManager(dataLoader);\n\nobjectManager.registerListType(Continent, \"continent\", \"Continent\", \"code\");\nobjectManager.registerListType(Country, \"country\", \"Country\", \"code\");\n```\n\n**(!) Important note: Make sure you give the `ObjectManager` the proper name for the id property of each object if it doesn't use `id`, otherwise this _will_ cause issues**\n\n### Step 4 - Use the data!\n\nYou just grab the items from your object manager and start using them like you would any other MobX object. For things like grabbing a list from search, use a normal gql query and have it only return the ids of the objects, then fetch those all from the `ObjectManager` and use the data you want, any data not yet loaded will be grabbed from the server automatically. This does split it into two network requests, however the first request will be smaller and the second request will potentially save a lot of data if a lot of the objects are cached.\n\n```ts\nconst continentRepo = objectManager.getList(Continent);\nconst continentNorthAmerica = continentRepo.get(\"NA\");\n\nautorun(() =\u003e {\n  console.log(continentNorthAmerica.name);\n  console.log(\" Countries:\");\n  continentNorthAmerica.countries.map((country) =\u003e {\n    console.log(\"  \", country.code, \"-\", country.name, country.emoji);\n  });\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodentman87%2Fmobql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodentman87%2Fmobql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodentman87%2Fmobql/lists"}