Repository files navigation

Use Relay with ReScript.

Join our Discord

Are you using version>= 0.13.0 and ReScript syntax with VSCode? Make sure you install ourdedicated VSCode extension. Note: It only works with ReScript syntax.

Check out thedocumentation.

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

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

/* Avatar.res */moduleUserFragment= %relay(`  fragment Avatar_user on User {    firstName    lastName    avatarUrl  }`)@react.componentletmake= (~user)=> {letuserData=UserFragment.use(user)  <imgclassName="avatar"src=userData.avatarUrlalt={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 afragment reference from the GraphQL object where it was spread. Any object with one or more fragments spread on it will have afragmentRefs prop on it,someObj.fragmentRefs. Pass that to the fragment hook.

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

/* UserProfile.res */moduleUserFragment= %relay(`  fragment UserProfile_user on User {    firstName    lastName    friendCount    ...Avatar_user  }`)@react.componentletmake= (~user)=> {letuserData=UserFragment.use(user)  <div>    <Avataruser=userData.fragmentRefs />    <h1> {React.string(userData.firstName++ (" "++userData.lastName))} </h1>    <div>      <p>        {React.string(userData.firstName++ (" has "++ (userData.friendCount->Int.toString++" friends.")),        )}      </p>    </div>  </div>}

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

/* Dashboard.res */moduleQuery= %relay(`  query DashboardQuery {    me {      ...UserProfile_user    }  }`)@react.componentletmake= ()=> {letqueryData=Query.use(~variables=(), ())  <div> <UserProfileuser=queryData.me.fragmentRefs /> </div>}

RescriptRelay has moved through a few major lines with different ReScript baselines. Use the compatibility guide below to pick the right versions:

Additional context on historical focus areas:

• 1.x will receive critical bug fixes etc, but new features won't be added
• 2.x focuses on compatibility with ReScript v11, and uncurried mode (uncurried mode can be optional). This is intended to make the transition to v11+ smooth
• 3.x fully embraces uncurried mode (no curried mode available), and adds a bunch of new stuff + changes existing APIs to make them better and more ergonomic
• 4.x focuses exclusively on ReScript v12+.

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