Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vue-relay/vue-relay

:vulcan_salute: :on: :card_index_dividers: A framework for building GraphQL-driven Vue.js applications.
https://github.com/vue-relay/vue-relay

frontend graphql javascript relay vue

Last synced: 3 months ago
JSON representation

:vulcan_salute: :on: :card_index_dividers: A framework for building GraphQL-driven Vue.js applications.

Host: GitHub
URL: https://github.com/vue-relay/vue-relay
Owner: vue-relay
License: bsd-2-clause
Archived: true
Created: 2018-02-19T09:37:01.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2021-10-29T20:57:48.000Z (about 3 years ago)
Last Synced: 2024-05-29T03:14:08.135Z (7 months ago)
Topics: frontend, graphql, javascript, relay, vue
Language: JavaScript
Homepage: https://www.npmjs.com/package/vue-relay
Size: 466 KB
Stars: 119
Watchers: 8
Forks: 10
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# vue-relay

A framework for building GraphQL-driven Vue.js applications.

[![npm](https://img.shields.io/npm/v/vue-relay.svg)](https://www.npmjs.com/package/vue-relay)

## Introduction

### Installation and Setup

#### Installation

Install Vue and Relay using `yarn` or `npm`:

``` sh
yarn add vue vue-relay
```

#### Set up babel-plugin-relay

Relay Modern requires a Babel plugin to convert GraphQL to runtime artifacts:

``` sh
yarn add --dev babel-plugin-relay graphql
```

Add `"relay"` to the list of plugins your `.babelrc` file:

``` json
{
"plugins": [
"relay"
]
}
```

Please 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).

#### Set up relay-compiler

Relay'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`:

``` sh
yarn add --dev relay-compiler graphql
```

This 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:

``` json
"scripts": {
"relay": "relay-compiler --src ./src --schema ./schema.graphql"
}
```

Then, after making edits to your application files, just run the `relay` script to generate new compiled artifacts:

``` sh
yarn run relay
```

**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.

For more details, check out [Relay Compiler docs](https://relay.dev/docs/en/graphql-in-relay.html#relay-compiler).

---

## API Reference

### \

#### Props

- `environment`: The [Relay Environment](https://relay.dev/docs/en/relay-environment.html)
- `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 `Query`. Optional, if not provided, an empty props object is passed to the render callback.
- `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.

#### Scoped Slot Props

- `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.
- `error`: Error will be defined if an error has occurred while fetching the query.
- `retry`: Reload the data. It is null if `query` was not provided.

#### Example

``` vue

{{ props.page.name }} is great!

import { QueryRenderer, graphql } from 'vue-relay'

export default {
name: 'example',
components: {
QueryRenderer
},
data () {
return {
environment: ..., // https://relay.dev/docs/en/relay-environment.html
query: graphql`
query ExampleQuery($pageID: ID!) {
page(id: $pageID) {
name
}
}
`,
variables: {
pageID: '110798995619330'
}
}
}
}

```

### Fragment Container

``` javascript
createFragmentContainer([component, ]fragmentSpec)
```

#### Props

- fragments as specified by the fragmentSpec

#### Component / Scoped Slot Props

``` javascript
{
relay: {
environment,
},
// Additional props as specified by the fragmentSpec
}
```

### Refetch Container

``` javascript
createRefetchContainer([component, ]fragmentSpec, refetchQuery)
```

#### Props

- fragments as specified by the fragmentSpec

#### Component / Scoped Slot Props

``` javascript
{
relay: {
environment,
refetch(),
},
// Additional props as specified by the fragmentSpec
}
```

### Pagination Container

``` javascript
createPaginationContainer([component, ]fragmentSpec, connectionConfig)
```

#### Props

- fragments as specified by the fragmentSpec

#### Component / Scoped Slot Props

``` javascript
{
relay: {
environment,
hasMore(),
isLoading(),
loadMore(),
refetchConnection()
},
// Additional props as specified by the fragmentSpec
}
```

### Comparison with `react-relay`

- `QueryRenderer` does not take render function.
- `vue-relay` replaces it with [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
- Container creating functions take `component` as an optional argument.
- If provided, a conatiner will pass props to the given `component`.
- If ommited, a conatiner will pass props to its default scoped slot.

### Other APIs

Other APIs are exactly same as Relay's Public APIs. Please refer to Relay's [documentation](https://relay.dev/docs/en/introduction-to-relay.html).

---

## Example

The [vue-relay-examples](https://github.com/ntkme/vue-relay-examples) repository contains an implementation of [TodoMVC](http://todomvc.com/). To try it out:

``` sh
git clone https://github.com/ntkme/vue-relay-examples.git
cd vue-relay-examples/todo
npm install
npm run build
npm start
```

---

## License

vue-relay is [BSD-2-Clause licensed](LICENSE).

Relay is [MIT licensed](https://github.com/facebook/relay/blob/master/LICENSE).