# reason-relay

> Use Relay with ReScript.

Latest version **0.15.0** (published 2021-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install reason-relay
pnpm add reason-relay
yarn add reason-relay
bun add reason-relay
```

Provides the command `reason-relay-compiler`.

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2021-02-23 |
| First published | 2019-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 50.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 345 |
| Author | Gabriel Nordeborn |
| Maintainers | _zth |
| Keywords | graphql, relay, relaymodern, react, reason, reasonml |

## Links

- npm: https://www.npmjs.com/package/reason-relay
- Repository: https://github.com/zth/reason-relay
- Homepage: https://github.com/zth/reason-relay#readme
- Issues: https://github.com/zth/reason-relay/issues
- npm.io page: https://npm.io/package/reason-relay

## Dependencies (1)

- [mkdirp-sync](https://npm.io/package/mkdirp-sync.md) ^0.0.3

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 0.15.0 (latest) — 2021-02-23
- 0.14.1 (static-binaries) — 2021-02-24
- 0.1.0-alpha.1 (alpha) — 2019-07-26
- 0.14.0-static-binaries — 2021-02-23
- 0.14.0 — 2021-02-09
- 0.13.0 — 2021-01-16
- 0.12.1 — 2020-11-25
- 0.12.0 — 2020-11-22
- 0.11.0 — 2020-08-03
- 0.10.0 — 2020-07-25
- 0.9.2 — 2020-05-30
- 0.9.1 — 2020-05-18
- 0.9.0 — 2020-05-17
- 0.8.3 — 2020-04-28
- 0.8.2 — 2020-04-17
- … 24 more at https://npm.io/package/reason-relay/versions

## README

# reason-relay

Use Relay with ReasonML/ReScript.

[**Join our Discord**](https://discord.gg/wzj4EN8XDc)

## Getting started

> Are you using version `>= 0.13.0` and ReScript syntax with VSCode? Make sure you install our [decicated VSCode extension](https://marketplace.visualstudio.com/items?itemName=GabrielNordeborn.vscode-rescript-relay). Note: It only works with ReScript syntax.

Check out the [documentation](https://reason-relay-documentation.zth.now.sh/docs/start-here).

Also, check out the [changelog](CHANGELOG.md) - things will continue change some between versions (including breaking changes, although we'll try and keep them to a minimum) as we iterate and reach a stable version.

## What it looks like

Your components define what data they need through `%relay()`.

```rescript
/* Avatar.res */
module UserFragment = %relay(
  `
  fragment Avatar_user on User {
    firstName
    lastName
    avatarUrl
  }
`
)

@react.component
let make = (~user) => {
  let userData = UserFragment.use(user)

  <img
    className="avatar"
    src=userData.avatarUrl
    alt={
      userData.firstName ++ " "
      userData.lastName
    }
  />
}

```

Fragments can include other fragments. This allows you to break your UI into encapsulated components defining their own data demands.

Hooks to use your fragments are autogenerated for you. The hook needs a _fragment reference_ from the GraphQL object where it was spread. Any object with one or more fragments spread on it will have a `fragmentRefs` prop on it, `someObj.fragmentRefs`. Pass that to the fragment hook.

`Avatar_user` is spread right on the fragment, so we pass `userData.fragmentRefs` to the `<Avatar />` component since we know it'll contain the fragment ref for `Avatar_user` that `<Avatar />` needs. The `<Avatar />` component then uses that to get its data.

```rescript
/* UserProfile.res */
module UserFragment = %relay(
  `
  fragment UserProfile_user on User {
    firstName
    lastName
    friendCount
    ...Avatar_user
  }
`
)

@react.component
let make = (~user) => {
  let userData = UserFragment.use(user)

  <div>
    <Avatar user=userData.fragmentRefs />
    <h1> {React.string(userData.firstName ++ (" " ++ userData.lastName))} </h1>
    <div>
      <p>
        {React.string(
          userData.firstName ++ (" has " ++ (userData.friendCount->string_of_int ++ " friends.")),
        )}
      </p>
    </div>
  </div>
}
```

Finally, you make a query using `%relay()` and include the fragments needed to render the entire tree of components.

```rescript
/* Dashboard.res */
module Query = %relay(`
  query DashboardQuery {
    me {
      ...UserProfile_user
    }
  }
`)

@react.component
let make = () => {
  let queryData = Query.use(~variables=(), ())

  <div> <UserProfile user=queryData.me.fragmentRefs /> </div>
}

```

## Examples

- A general example showcasing most available features: https://github.com/zth/reason-relay/tree/master/example

---
_Source: https://npm.io/package/reason-relay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._