{"id":15313330,"url":"https://github.com/vue-relay/vue-relay","last_synced_at":"2025-10-08T22:32:08.468Z","repository":{"id":46343914,"uuid":"122042062","full_name":"vue-relay/vue-relay","owner":"vue-relay","description":":vulcan_salute: :on: :card_index_dividers: A framework for building GraphQL-driven Vue.js applications.","archived":true,"fork":false,"pushed_at":"2021-10-29T20:57:48.000Z","size":477,"stargazers_count":119,"open_issues_count":6,"forks_count":10,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-29T18:05:50.490Z","etag":null,"topics":["frontend","graphql","javascript","relay","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-relay","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-relay.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-02-19T09:37:01.000Z","updated_at":"2023-12-18T22:10:22.000Z","dependencies_parsed_at":"2022-09-19T17:31:07.601Z","dependency_job_id":null,"html_url":"https://github.com/vue-relay/vue-relay","commit_stats":null,"previous_names":["ntkme/vue-relay"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-relay%2Fvue-relay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-relay%2Fvue-relay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-relay%2Fvue-relay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-relay%2Fvue-relay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-relay","download_url":"https://codeload.github.com/vue-relay/vue-relay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235770063,"owners_count":19042373,"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":["frontend","graphql","javascript","relay","vue"],"created_at":"2024-10-01T08:41:24.592Z","updated_at":"2025-10-08T22:32:03.176Z","avatar_url":"https://github.com/vue-relay.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["JavaScript Libraries"],"readme":"# vue-relay\n\nA framework for building GraphQL-driven Vue.js applications.\n\n[![npm](https://img.shields.io/npm/v/vue-relay.svg)](https://www.npmjs.com/package/vue-relay)\n\n## Introduction\n\n### Installation and Setup\n\n#### Installation\n\nInstall Vue and Relay using `yarn` or `npm`:\n\n``` sh\nyarn add vue vue-relay\n```\n\n#### Set up babel-plugin-relay\n\nRelay Modern requires a Babel plugin to convert GraphQL to runtime artifacts:\n\n``` sh\nyarn add --dev babel-plugin-relay graphql\n```\n\nAdd `\"relay\"` to the list of plugins your `.babelrc` file:\n\n``` json\n{\n  \"plugins\": [\n    \"relay\"\n  ]\n}\n```\n\nPlease note that the \"relay\" plugin should run before other plugins or presets to ensure the `graphql` template literals are correctly transformed. See Babel's [documentation on this topic](https://babeljs.io/docs/plugins/#plugin-preset-ordering).\n\n#### Set up relay-compiler\n\nRelay's ahead-of-time compilation requires the [Relay Compiler](https://relay.dev/docs/en/graphql-in-relay.html#relay-compiler), which you can install via `yarn` or `npm`:\n\n``` sh\nyarn add --dev relay-compiler graphql\n```\n\nThis installs the bin script `relay-compiler` in your node_modules folder. It's recommended to run this from a `yarn/npm` script by adding a script to your `package.json` file:\n\n``` json\n\"scripts\": {\n  \"relay\": \"relay-compiler --src ./src --schema ./schema.graphql\"\n}\n```\n\nThen, after making edits to your application files, just run the `relay` script to generate new compiled artifacts:\n\n``` sh\nyarn run relay\n```\n\n**Note:** `relay-compiler` does not understand single-file components with a `.vue` extension. You can `export` `graphql` template literals in `.js` files, and then `import` them in `.vue` single-file components.\n\nFor more details, check out [Relay Compiler docs](https://relay.dev/docs/en/graphql-in-relay.html#relay-compiler).\n\n---\n\n## API Reference\n\n### \\\u003cQueryRenderer /\u003e\n\n#### Props\n\n- `environment`: The [Relay Environment](https://relay.dev/docs/en/relay-environment.html)\n- `query`: The graphql tagged query. **Note:** To [enable compatibility](https://relay.dev/docs/en/relay-compat.html) mode, relay-compiler enforces the query to be named as `\u003cFileName\u003eQuery`. Optional, if not provided, an empty props object is passed to the render callback.\n- `variables`: Object containing set of variables to pass to the GraphQL query, i.e. a mapping from variable name to value. **Note:** If a new set of variables is passed, the QueryRenderer will re-fetch the query.\n\n#### Scoped Slot Props\n\n- `props`: Object containing data obtained from the query; the shape of this object will match the shape of the query. If this object is not defined, it means that the data is still being fetched.\n- `error`: Error will be defined if an error has occurred while fetching the query.\n- `retry`: Reload the data. It is null if `query` was not provided.\n\n#### Example\n\n``` vue\n\u003c!-- Example.vue --\u003e\n\u003ctemplate\u003e\n  \u003cquery-renderer :environment=\"environment\" :query=\"query\" :variables=\"variables\" v-slot=\"{ props, error, retry }\"\u003e\n    \u003cdiv v-if=\"error\"\u003e{{ error.message }}\u003c/div\u003e\n    \u003cdiv v-else-if=\"props\"\u003e{{ props.page.name }} is great!\u003c/div\u003e\n    \u003cdiv v-else\u003eLoading\u003c/div\u003e\n  \u003c/query-renderer\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { QueryRenderer, graphql } from 'vue-relay'\n\nexport default {\n  name: 'example',\n  components: {\n    QueryRenderer\n  },\n  data () {\n    return {\n      environment: ..., // https://relay.dev/docs/en/relay-environment.html\n      query: graphql`\n        query ExampleQuery($pageID: ID!) {\n          page(id: $pageID) {\n            name\n          }\n        }\n      `,\n      variables: {\n        pageID: '110798995619330'\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### Fragment Container\n\n``` javascript\ncreateFragmentContainer([component, ]fragmentSpec)\n```\n\n#### Props\n\n- fragments as specified by the fragmentSpec\n\n#### Component / Scoped Slot Props\n\n``` javascript\n{\n  relay: {\n    environment,\n  },\n  // Additional props as specified by the fragmentSpec\n}\n```\n\n\n### Refetch Container\n\n``` javascript\ncreateRefetchContainer([component, ]fragmentSpec, refetchQuery)\n```\n\n#### Props\n\n- fragments as specified by the fragmentSpec\n\n#### Component / Scoped Slot Props\n\n``` javascript\n{\n  relay: {\n    environment,\n    refetch(),\n  },\n  // Additional props as specified by the fragmentSpec\n}\n```\n\n### Pagination Container\n\n``` javascript\ncreatePaginationContainer([component, ]fragmentSpec, connectionConfig)\n```\n\n#### Props\n\n- fragments as specified by the fragmentSpec\n\n#### Component / Scoped Slot Props\n\n``` javascript\n{\n  relay: {\n    environment,\n    hasMore(),\n    isLoading(),\n    loadMore(),\n    refetchConnection()\n  },\n  // Additional props as specified by the fragmentSpec\n}\n```\n\n### Comparison with `react-relay`\n\n- `QueryRenderer` does not take render function.\n  - `vue-relay` replaces it with [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).\n- Container creating functions take `component` as an optional argument.\n  - If provided, a conatiner will pass props to the given `component`.\n  - If ommited, a conatiner will pass props to its default scoped slot.\n\n### Other APIs\n\nOther APIs are exactly same as Relay's Public APIs. Please refer to Relay's [documentation](https://relay.dev/docs/en/introduction-to-relay.html).\n\n---\n\n## Example\n\nThe [vue-relay-examples](https://github.com/ntkme/vue-relay-examples) repository contains an implementation of [TodoMVC](http://todomvc.com/). To try it out:\n\n``` sh\ngit clone https://github.com/ntkme/vue-relay-examples.git\ncd vue-relay-examples/todo\nnpm install\nnpm run build\nnpm start\n```\n\n---\n\n## License\n\nvue-relay is [BSD-2-Clause licensed](LICENSE).\n\nRelay is [MIT licensed](https://github.com/facebook/relay/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-relay%2Fvue-relay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-relay%2Fvue-relay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-relay%2Fvue-relay/lists"}