{"id":16292497,"url":"https://github.com/exogen/apollo-dynamic-queries","last_synced_at":"2025-03-20T03:30:50.809Z","repository":{"id":66194736,"uuid":"107745878","full_name":"exogen/apollo-dynamic-queries","owner":"exogen","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-25T04:51:37.000Z","size":133,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T14:53:56.635Z","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/exogen.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"exogen","buy_me_a_coffee":"mosswood"}},"created_at":"2017-10-21T02:43:58.000Z","updated_at":"2019-01-24T02:21:20.000Z","dependencies_parsed_at":"2023-04-30T17:47:31.854Z","dependency_job_id":null,"html_url":"https://github.com/exogen/apollo-dynamic-queries","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":"0.33333333333333337","last_synced_commit":"9d4d34267c6c33db3de3768de11ea65b72546da8"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fapollo-dynamic-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fapollo-dynamic-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fapollo-dynamic-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fapollo-dynamic-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exogen","download_url":"https://codeload.github.com/exogen/apollo-dynamic-queries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244543734,"owners_count":20469552,"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-10-10T20:07:10.625Z","updated_at":"2025-03-20T03:30:50.804Z","avatar_url":"https://github.com/exogen.png","language":"JavaScript","funding_links":["https://github.com/sponsors/exogen","https://buymeacoffee.com/mosswood"],"categories":[],"sub_categories":[],"readme":"# apollo-dynamic-queries\n\n:warning: This project is highly experimental, unstable, and probably performs terribly!\n\n## Setup\n\n```console\n$ git clone git@github.com:exogen/apollo-dynamic-queries.git\n$ cd apollo-dynamic-queries\n$ yarn\n```\n\nRun the demo:\n\n```console\nyarn run start\n```\n\nOpen [http://localhost:8080/][dev server].\n\n## Motivation\n\nRelay and Apollo are designed for making static queries. I do not want that. I\nwant the GraphQL queries being made to be dynamically defined by what components\nactually get rendered in the component tree. \n\nHere’s an example of what I mean:\n\n```jsx\n\u003cArtist mbid=\"5b11f4ce-a62d-471e-81fc-a69a8278c7da\"\u003e\n  \u003cheader\u003e\n    \u003cArtist.Name /\u003e\n    \u003cArtist.Disambiguation /\u003e\n  \u003c/header\u003e\n\u003c/Artist\u003e\n```\n\nI want the Artist component to define a base GraphQL query, but the fields\nneeded by child components (in this case `name` and `disambiguation`) **only\nget added to the query if those components are actually rendered**. If you were\nto remove the child from the code above, the field should not be requested –\nwithout Artist needing to know about all the components from which to add\nfragments ahead of time. It is completely dynamic.\n\n## How it works\n\n1. The [withQuery][] HOC creates a component that will make a query. When\n   configuring the HOC, the component can define some `objects` – these are the\n   values that descendant components are allowed to extend (via fragments) and\n   receive (via props). If the query is like a template, then its “objects” are\n   the template blocks that can be filled in by descendants. The component also\n   configures a `query` and `variables`. See the [Artist][] component. (Note that\n   adding Name and Disambiguation onto Artist as properties is just to make using\n   them easier, it doesn’t inform the HOC or query in any way.)\n2. The [withData][] HOC creates a component that can receive objects from one or\n   more ancestor queries in its `data` prop, and optionally extend them with\n   fragments. (Fragments don’t have to use the full GraphQL fragment syntax,\n   they can just be a list of fields – they’ll just be dumbly injected into the\n   query using string interpolation.) When a component wrapped with `withData`\n   is mounting, it uses `context` to add its fragments to the ancestor’s objects\n   and subscribe to changes. That way, if the component is never rendered, its\n   fragments will never be part of the query! See [Name][] and [Disambiguation][].\n3. Nested queries should work just fine – components wrapped with `withData`\n   should be able to access objects from multiple different ancestor queries. If\n   a nested query defines any objects of the same name, they will just mask\n   the ancestor’s object within that component subtree.\n4. No intelligent merging or conflict resolution is done on the added fragments\n   at the moment. That is on the to-do list.\n\n[DynamicQueryProvider]: src/DynamicQueryProvider.js\n[withData]: src/withData.js\n[withQuery]: src/withQuery.js\n[dev server]: http://localhost:8080/\n[Artist]: demo/Artist/index.js\n[Name]: demo/Artist/Name.js\n[Disambiguation]: demo/Artist/Disambiguation.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Fapollo-dynamic-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexogen%2Fapollo-dynamic-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Fapollo-dynamic-queries/lists"}