```
--------------------------------
### Defining and Using ReScript Relay Fragments
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/tutorial/4-fragments.md
Shows how to define fragments using %relay template strings, use the use hook to retrieve data, and spread fragments across different components. Demonstrates creating a reusable Image component that can work with data from different graph locations like thumbnails and profile pictures.
```ReScript
module Fragment = %relay(`
fragment Image_image on Image {
url
}
`)
@react.component
let make = (~image, ~width=?, ~height=?, ~className=?) => {
let data = Fragment.use(image)
}
```
```ReScript
module StoryFragment = %relay(`
fragment Story_story on Story {
title
summary
postedAt
poster {
...PosterByline_actor
}
thumbnail {
// change-line
...Image_image
}
}
`)
...
@react.component
let make = (~story) => {
...
// change-line
...
```
```ReScript
module PosterBylineFragment = %relay(`
fragment PosterBylineFragment on Actor {
name
profilePicture {
// change-line
...Image_image
}
}
`)
...
@react.component
let make = (~poster) => {
...
// change-line
{name->React.string}
{comments
->Array.map(comment => )
->React.array}
{switch hasNextPage {
| false => React.null
// change-line
| true =>
}}
// change-line
{isLoadingNext || isPending ? : React.null}
}
```
--------------------------------
### RecordSourceSelectorProxy: Get Record by ID (ReScript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves a record by its dataId from the RecordSourceSelectorProxy. Returns an option containing the RecordProxy if found.
```rescript
let get: (t, ~dataId: dataId) => option
```
--------------------------------
### RecordSourceSelectorProxy: Get Plural Root Field (ReScript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the plural root field from a RecordSourceSelectorProxy. This is the plural version of RecordSourceSelectorProxy.getRootField.
```rescript
let getPluralRootField: (t, ~fieldName: string) => option>>
```
--------------------------------
### RecordProxy: Get Integer Value (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the value of a field, expecting it to be an integer. Supports optional query arguments.
```rescript
let getValueInt: (t, ~name: string, ~arguments: arguments=?) => option
```
--------------------------------
### RecordProxy: Get Boolean Array Value (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the value of a field, expecting it to be an array of booleans. Optional arguments can be used.
```rescript
let getValueBoolArray: (
t,
~name: string,
~arguments: arguments=?
) => option>>
```
--------------------------------
### Define GraphQL Query with ReScript Relay
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/tutorial/3-query-basics.md
Creates a GraphQL query using ReScriptRelay's %relay tag. Queries topStory with nested fields for poster and thumbnail data. Follows Relay naming conventions for query modules.
```rescript
// color1
module NewsfeedQuery = %relay(`
// color2
query NewsfeedQuery {
topStory {
// color3
title
// color3
summary
// color4
poster {
name
profilePicture {
url
}
}
thumbnail {
url
}
}
}
`)
```
--------------------------------
### RecordProxy: Get Float Value (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the value of a field, expecting it to be a float. Optional arguments can be included for query parameters.
```rescript
let getValueFloat: (t, ~name: string, ~arguments: arguments=?) => option
```
--------------------------------
### RecordProxy: Get Integer Array Value (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the value of a field, expecting it to be an array of integers. Optional arguments can be provided.
```rescript
let getValueIntArray: (
t,
~name: string,
~arguments: arguments=?
) => option>>
```
--------------------------------
### Use useLoader in Parent Component
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/tutorial/6-queries-for-interaction.md
Demonstrates setting up `useLoader` in the parent component to create a query reference and a function to initiate the query. The query reference is passed down to the child component.
```rescript
@react.component
let make = (~poster) => {
let data = Fragment.use(poster)
let hoverRef = React.useRef(Js.Nullable.null)
let (
hovercardQueryRef,
loadHoverCardQuery,
_,
) = PosterDetailsHovercardContents.HovercardQuery.useLoader()
switch data {
| None => React.null
| Some({id, name, profilePicture}) =>
}
}
```
--------------------------------
### Configure Relay Environment for Subscriptions in ReScript
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/subscriptions.md
This code sets up a subscription client and defines a subscription function for the Relay network, adapting the official Relay documentation example. Purpose is to enable WebSocket subscriptions alongside queries. Dependencies: SubscriptionsTransportWs, rescript-relay, fetchQuery function. Inputs: GraphQL config, variables; outputs: Observable for subscription data. Limitations: Assumes localhost server; requires proper token for fetch.
```rescript
/* RelayEnv.res */
let subscriptionClient = SubscriptionsTransportWs.createSubscriptionClient(
"ws://localhost:4000/graphql",
{"reconnect": true},
)
let subscriptionFunction: RescriptRelay.Network.subscribeFn = (config, variables, _cacheConfig) => {
let query = config.text->Nullable.getOr("")
let subscriptionQuery: SubscriptionsTransportWs.operationOptions = {
query: query,
variables: variables,
}
RescriptRelay.Observable.make(sink => {
let observable = subscriptionClient["request"](subscriptionQuery)
let subscription = observable["subscribe"](sink)
Some(subscription)
})
}
let network = RescriptRelay.Network.makePromiseBased(
~fetchFunction=fetchQuery(token),
~subscriptionFunction
)
let store = {
open RescriptRelay
Store.make(~source=RecordSource.make())
}
let environment = RescriptRelay.Environment.make(~network, ~store)
```
--------------------------------
### GraphQL union type definition
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/unions.md
Example GraphQL schema showing a union type (Owner) that can be either User or Group, and a query field that returns this union.
```graphql
type User {
id: ID!
firstName: String!
lastName: String!
}
type Group {
id: ID!
name: String!
}
union Owner = User | Group
type Query {
roomOwner(roomId: ID!): Owner
}
```
--------------------------------
### Rescript Component Rendering Nodes and Load More Button
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/tutorial/9-connections-pagination.md
This snippet demonstrates rendering the nodes of a connection and a load more button in a Rescript component, simplifying the logic with the `getConnectionNodes` helper.
```rescript
{comments
->Array.map(comment => )
->React.array}
{switch hasNextPage {
| Some(true) =>
| Some(false) | None => React.null
}}
```
--------------------------------
### Implement preloadable query with deferred component
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/making-queries.md
Shows how to use %relay.deferredComponent with preloadable query loading for improved performance. The pattern enables query preloading outside of React render cycle. Requires Routes module and Relay environment. The example demonstrates renderer creation with preload function and prepared query data injection.
```ReScript
module SomeComponent = %relay.deferredComponent(SomeComponent.make)
let renderer = Routes.SomeRoute.Route.makeRenderer(
~prepareCode=_ => [SomeComponentQuery.preload()],
~prepare=({environment, userId}) => {
// color2
SomeComponentQuery_graphql.load(
// change-line
SomeComponentQuery_preloadable_graphql.load(
~environment,
~variables={userId: userId},
~fetchPolicy=StoreOrNetwork,
)
},
~render=props => {
},
)
```
--------------------------------
### RecordSourceSelectorProxy: Get Root Field (ReScript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves a specific RecordProxy for a field at the root level. It's recommended to use RecordSourceSelectorProxy.getRoot() and traverse from there.
```rescript
let getRootField: (t, ~fieldName: string) => option
```
--------------------------------
### RecordProxy: Get Float Array Value (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the value of a field, expecting it to be an array of floats. Supports optional query arguments.
```rescript
let getValueFloatArray: (
t,
~name: string,
~arguments: arguments=?
) => option>>
```
--------------------------------
### Commit Local Payload for BlogPostDraft in RescriptRelay
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/interacting-with-the-store.md
This Rescript function `setupBlogPostDraft` uses `Query.commitLocalPayload` to insert a new `BlogPostDraft` into the Relay store. It generates a unique client ID for the draft and initializes title and content as empty strings. This function requires a Relay environment as input.
```rescript
// Draft.res (continued)
let setupBlogPostDraft = (environment) => {
Query.commitLocalPayload(
~environment,
~variables=(),
~payload={
blogPostCurrentlyEditing: {
id: RescriptRelay.generateUniqueClientID(),
title: Some(""),
content: Some(""),
}
}
)
}
```
--------------------------------
### Render Newsfeed Stories using Fragment Hook
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/tutorial/9-connections-pagination.md
Renders the newsfeed stories using the Relay fragment hook (`use`) and `getConnectionNodes` helper. It maps over the story nodes to display individual stories, passing necessary props.
```rescript
@react.component
let make = (~viewer as viewerRef) => {
let contents = Fragment.use(viewerRef)
let stories = Fragment.getConnectionNodes(contents.newsfeedStories)
<>
{stories
->Array.map(story => )
->React.array}
}
```
--------------------------------
### RecordProxy: Get String Value (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the value of a field, expecting it to be a string. Optional arguments can be provided to specify query arguments.
```rescript
let getValueString: (t, ~name: string, ~arguments: arguments=?) => option
```
--------------------------------
### GraphQL Mutation with Fragments
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/mutations.md
Example GraphQL schema demonstrating a mutation that includes nested fragments. This structure highlights the complexity that @raw_response_type aims to simplify by flattening the response.
```graphql
fragment Avatar_user on User {
id
avatarUrl
firstName
}
fragment SomeComponent_user on User {
id
firstName
lastName
...Avatar_user
}
fragment SomeOtherComponent_blogPost on BlogPost {
id
title
author {
id
firstName
...SomeComponent_user
}
}
mutation AddBlogPost($input: AddBlogPostInput!) {
addBlogPost(input: $input) {
addedBlogPost {
id
title
...SomeOtherComponent_blogPost
}
}
}
```
--------------------------------
### Using @exhaustive directive in RescriptRelay
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/unions.md
Shows how to use the @exhaustive directive to enforce compile-time checks for handling all union members. Includes basic usage and parameter examples.
```rescript
/* RoomOwner.res */
module Query = %relay(
`
query RoomOwnerQuery($roomId: ID!) {
roomOwner(roomId: $roomId) @exhaustive {
__typename
... on User {
firstName
lastName
}
... on Group {
name
}
}
}
`
)
```
```rescript
/* Ignore the Group type in exhaustiveness checking */
roomOwner(roomId: $roomId) @exhaustive(ignore: ["Group"]) {
__typename
... on User {
firstName
lastName
}
}
```
```rescript
/* Temporarily disable exhaustiveness checking */
roomOwner(roomId: $roomId) @exhaustive(disabled: true) {
__typename
... on User {
firstName
lastName
}
}
```
--------------------------------
### RecordProxy: Get String Array Value (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Retrieves the value of a field, expecting it to be an array of strings. Optional arguments can be used for query parameters.
```rescript
let getValueStringArray: (
t,
~name: string,
~arguments: arguments=?
) => option>>
```
--------------------------------
### Rescript Fragment with usePagination Hook
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/tutorial/9-connections-pagination.md
This snippet demonstrates using the `usePagination` hook to simplify pagination in a Rescript component. The hook returns both the data and a `loadNext` function for loading more data.
```rescript
let {data, loadNext} = Fragment.usePagination(story)
let onLoadMore = () => loadNext(~count=3)->RescriptRelay.Disposable.ignore
```
--------------------------------
### RecordProxy: Get Type Name (Rescript)
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/api-reference.md
Returns the `__typename` string for the current record. This is useful for identifying the specific type of data represented by the RecordProxy.
```rescript
let getType: t => string
```
--------------------------------
### Fetch node with Relay and handle multiple fragments in ReScript
Source: https://github.com/zth/rescript-relay/blob/master/rescript-relay-documentation/docs/the-node-interface.md
Shows a root node query that includes two fragments, ProfileSettings and ProfilePreview. The component switches on the variant returned by the query to render the appropriate fragment component. Utilizes ReScript's variant pattern matching with #ProfileSettings and #ProfilePreview.
```rescript
module Query = %relay(`
query UserProfileQuery($id: ID!) {
node(id: $id) {
... on User {
id
name
email
...ProfileSettings
...ProfilePreview
}
__typename
}
}
`)
@react.component
let make = (~id: string) => {
let queryData = Query.use(
~variables={
id: id,
}
)
{switch queryData.node {
| Some(#ProfileSettings(user)) =>
| Some(#ProfilePreview(user)) =>
| None => React.null
}}
}
```