Relay

https://relay.dev/docs/
Admin
Relay is a powerful GraphQL client for React that provides outstanding performance by default while...
Tokens:167,260
Snippets:1,480
Trust Score:9.9
Update:3 days ago
Show doc for...
Tokens:
Raw
### Initialize the Relay example project

Source: https://relay.dev/docs/tutorial/intro

Commands to clone the repository, navigate to the newsfeed directory, install dependencies, and start the development server.

```bash
git clone https://github.com/relayjs/relay-examples.git  
cd relay-examples/newsfeed  
npm install  
npm run dev  
```

--------------------------------

### Test setup for preloaded queries

Source: https://relay.dev/docs/guides/testing-relay-with-preloaded-queries

A complete example showing the arrangement of the mock environment, queuing the operation resolver, and rendering the component within a RelayEnvironmentProvider.

```javascript
const {RelayEnvironmentProvider} = require('react-relay');  
const {MockPayloadGenerator, createMockEnvironment} = require('relay-test-utils');  
const {act, render} = require('@testing-library/react');  
test("...", () => {  
  // arrange  
  const environment = createMockEnvironment();  
  environment.mock.queueOperationResolver(operation => {  
      return MockPayloadGenerator.generate(operation, {  
        CurrencyAmount() {  
          return {  
            formatted_amount: "1234$",  
          };  
        },  
      });  
    });  
  const query = YourComponentGraphQLQueryGoesHere; // can be the same, or just identical  
  const variables = {  
    // ACTUAL variables for the invocation goes here  
  };  
  environment.mock.queuePendingOperation(YourComponentGraphQLQuery, variables);  
  
 // act  
  const {getByTestId, ..otherStuffYouMightNeed} = render(  
    <RelayEnvironmentProvider environment={environment}>  
        <YourComponent data-testid="1234" {...componentPropsIfAny}/>  
    </RelayEnvironmentProvider>  
  );  
  // trigger the loading - click a button, emit an event, etc. or ...  
  act(() => jest.runAllImmediates()); // ... if loadQuery is in the useEffect()  
  // assert  
  // your assertions go here  
});
```

--------------------------------

### Install babel-plugin-relay and graphql

Source: https://relay.dev/docs/getting-started/babel-plugin

Install the required Babel plugin and graphql package as development dependencies.

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

--------------------------------

### Install Relay AI Skill

Source: https://relay.dev/docs/getting-started/quick-start

Optionally install the Relay best practices skill for AI coding assistants.

```bash
npx skills install facebook/relay  
```

--------------------------------

### Install Relay Dependencies

Source: https://relay.dev/docs/getting-started/quick-start

Install the required runtime and development dependencies for Relay, including the Babel plugin and compiler.

```bash
cd relay-example  
  
# Runtime dependencies  
npm install relay-runtime react-relay  
# Dev dependencies  
npm install --save-dev babel-plugin-relay graphql relay-compiler @rolldown/plugin-babel  
```

--------------------------------

### Implementing and Configuring relayFieldLogger

Source: https://relay.dev/docs/guides/relay-resolvers/errors

An example of a field logger function and how to provide it to the Relay Environment configuration.

```javascript
function fieldLogger(event) {  
  if(event.kind === "relay_resolver.error") {  
    // Log this somewhere!  
    console.warn(`Resolver error encountered in ${event.owner}.${event.fieldPath}`)  
    console.warn(event.error)  
  }  
}  
  
const environment = new Environment({  
  network: Network.create(/* your fetch function here */),  
  store: new RelayModernStore(new RecordSource()),  
  relayFieldLogger: fieldLogger  
});  
```

--------------------------------

### Document Comparison Example

Source: https://relay.dev/docs/guides/document-comparison

Demonstrates comparing a left document with a right document to identify missing selections.

```graphql
query A {  
  viewer {  
    timezone_estimate {  
      display_name  
      gmt_offset  
    }  
  }  
}  
```

```graphql
query A {  
  viewer {  
    timezone_estimate {  
      display_name  
    }  
  }  
}  
```

```text
[INFO] Found 1 missing selection(s):  
    4 │       display_name  
    5 │       gmt_offset  
      │       ^^^^^^^^^^  
    6 │     }  
* query -> viewer -> timezone_estimate -> gmt_offset  
```

--------------------------------

### Example subscription payload

Source: https://relay.dev/docs/guided-tour/updating-data/graphql-subscriptions

A sample JSON payload received by the client in response to a subscription event.

```json
{
  "feedback_like_subscribe": {
    "feedback": {
      "id": "feedback-id",
      "like_count": 321,
    }
  }
}

```

--------------------------------

### GraphQL Fragment Composition

Source: https://relay.dev/docs/guided-tour/rendering/fragments

Example of how GraphQL fragments can include other fragments to create reusable units.

```graphql
fragment UserFragment on User {  
  name  
  age  
  profile_picture(scale: 2) {  
    uri  
  }  
  ...AnotherUserFragment  
}  
  
fragment AnotherUserFragment on User {  
  username  
  ...FooUserFragment  
}  
```

--------------------------------

### Traditional HTTP API Request and Response

Source: https://relay.dev/docs/tutorial/graphql

An example of a standard REST-style GET request returning a fixed set of information.

```http
Request:  
GET /person?id=24601  
  
Response:  
{"id": "24601", "name": "Jean Valjean", "age": 64, "occupation": "Mayor"}
```

--------------------------------

### Create a Relay Environment with Network.create

Source: https://relay.dev/docs/guides/network-layer

This example demonstrates how to define a fetchQuery function and use it to initialize a Relay Environment. Note that advanced features like @stream, @defer, or Persisted Queries require additional implementation logic within the fetchQuery function.

```javascript
import {  
  Environment,  
  Network,  
  RecordSource,  
  Store,  
} from 'relay-runtime';  
  
// Define a function that fetches the results of an operation (query/mutation/etc)  
// and returns its results as a Promise:  
function fetchQuery(  
  operation,  
  variables,  
  cacheConfig,  
  uploadables,  
) {  
  return fetch('/graphql', {  
    method: 'POST',  
    headers: {  
      // Add authentication and other headers here  
      'content-type': 'application/json'  
    },  
    body: JSON.stringify({  
      query: operation.text, // GraphQL text from input  
      variables,  
    }),  
  }).then(response => {  
    return response.json();  
  });  
}  
  
// Create a network layer from the fetch function  
const network = Network.create(fetchQuery);
const store = new Store(new RecordSource())
  
const environment = new Environment({
  network,
  store
  // ... other options
});
  
export default environment;
```

--------------------------------

### Refetching with fetchQuery and loadQuery

Source: https://relay.dev/docs/guided-tour/refetching/refetching-queries-with-different-data

This example demonstrates how to avoid Suspense by manually tracking a loading state, fetching data into the store with fetchQuery, and then updating the query reference with loadQuery using a 'store-only' fetchPolicy.

```javascript
/**  
 * App.react.js  
 */  
const AppQuery = require('__generated__/AppQuery.graphql');  
  
function App(props: Props) {  
  const environment = useRelayEnvironment();  
  const [queryRef, loadQuery] = useQueryLoader(  
    AppQuery,  
    props.appQueryRef /* initial query ref */  
  );  
  const [isRefetching, setIsRefetching] = useState(false)  
  
  const refetch = useCallback(() => {  
    if (isRefetching) { return; }  
    setIsRefetching(true);  
    const variables = { id: 'different-id' };  
  
    // fetchQuery will fetch the query and write  
    // the data to the Relay store. This will ensure  
    // that when we re-render, the data is already  
    // cached and we don't suspend  
    fetchQuery(environment, AppQuery, variables)  
      .subscribe({  
        complete: () => {  
          setIsRefetching(false);  
  
          // *After* the query has been fetched, we call  
          // loadQuery again to re-render with a new  
          // queryRef.  
          // At this point the data for the query should  
          // be cached, so we use the 'store-only'  
          // fetchPolicy to avoid suspending.  
          loadQuery(variables, {fetchPolicy: 'store-only'});  
        },  
        error: () => {  
          setIsRefetching(false);  
        }  
      });  
  }, [/* ... */]);  
  
  return (  
    <React.Suspense fallback="Loading query...">  
      <MainContent  
        isRefetching={isRefetching}  
        refetch={refetch}  
        queryRef={queryRef}  
      />  
    </React.Suspense>  
  );  
}  
```

--------------------------------

### Subscription

Source: https://relay.dev/docs/glossary

GraphQL Subscriptions allow clients to subscribe to changes in a piece of data from the server and get notified whenever that data changes. The example shows a subscription using the `subscription` keyword.

```APIDOC
## Subscription

### Description
GraphQL Subscriptions are a mechanism which allow clients to subscribe to changes in a piece of data from the server, and get notified whenever that data changes. A GraphQL Subscription looks very similar to a query, with the exception that it uses the `subscription` keyword.

### Example
```graphql
subscription FeedbackLikeSubscription($input: FeedbackLikeSubscribeData!) {
  feedback_like_subscribe(data: $input) {
    feedback {
      id
      like_count
    }
  }
}
```
```

--------------------------------

### Create a subscription with useSubscription

Source: https://relay.dev/docs/guided-tour/updating-data/graphql-subscriptions

This example demonstrates using the useSubscription hook to establish a subscription for feedback likes. The configuration object is memoized using useMemo to prevent unnecessary subscription disposal and re-establishment.

```javascript
import type {Environment} from 'react-relay';  
import type {FeedbackLikeSubscribeData} from 'FeedbackLikeSubscription.graphql';  
  
const {graphql, useSubscription} = require('react-relay');  
const {useMemo} = require('React');  
  
function useFeedbackSubscription(  
  input: FeedbackLikeSubscribeData,  
) {  
  const config = useMemo(() => ({  
    subscription: graphql`  
      subscription FeedbackLikeSubscription(  
        $input: FeedbackLikeSubscribeData!  
      ) {  
        feedback_like_subscribe(data: $input) {  
          feedback {  
            like_count  
          }  
        }  
      }  
    `,  
    variables: {input},  
  }), [input]);  
  
  return useSubscription(config);  
}  
```

--------------------------------

### Relay experimental-compare-document-ir CLI help

Source: https://relay.dev/docs/guides/document-comparison

Displays the usage and available options for the experimental document comparison command.

```bash
> relay experimental-compare-document-ir --help  
EXPERIMENTAL! Compare intermediate representations (IR) of documents passed via left and right, outputs selections that exists in left but not in right.  
  
Usage: relay experimental-compare-document-ir [OPTIONS] --left <LEFT> --right <RIGHT>  
  
Options:  
      --left <LEFT>                    Document in string, must contain exactly 1 operation  
      --right <RIGHT>                  Document in string, must contain exactly 1 operation  
      --schemaPaths <SCHEMA_PATHS>...  Path(s) to the full schema file(s) to convert documents to intermediate representation (IR) for comparison  
  -h, --help                           Print help  
```

--------------------------------

### Refreshing with fetchQuery and useQueryLoader

Source: https://relay.dev/docs/guided-tour/refetching/refreshing-queries

This example demonstrates how to manually manage a loading state and use fetchQuery to update the Relay store before calling loadQuery with a store-only fetchPolicy to avoid suspending.

```javascript
/**  
 * App.react.js  
 */  
  
const AppQuery = require('__generated__/AppQuery.graphql');  
  
function App(props: Props) {  
  const environment = useRelayEnvironment();  
  const [queryRef, loadQuery] = useQueryLoader(  
    AppQuery,  
    props.appQueryRef /* initial query ref */  
  );  
  const [isRefreshing, setIsRefreshing] = useState(false)  
  
  const refresh = useCallback(() => {  
    if (isRefreshing) { return; }  
    const {variables} = props.appQueryRef;  
    setIsRefreshing(true);  
  
    // fetchQuery will fetch the query and write  
    // the data to the Relay store. This will ensure  
    // that when we re-render, the data is already  
    // cached and we don't suspend  
    fetchQuery(environment, AppQuery, variables)  
      .subscribe({  
        complete: () => {  
          setIsRefreshing(false);  
  
          // *After* the query has been fetched, we call  
          // loadQuery again to re-render with a new  
          // queryRef.  
          // At this point the data for the query should  
          // be cached, so we use the 'store-only'  
          // fetchPolicy to avoid suspending.  
          loadQuery(variables, {fetchPolicy: 'store-only'});  
        }  
        error: () => {  
          setIsRefreshing(false);  
        }  
      });  
  }, [/* ... */]);  
  
  return (  
    <React.Suspense fallback="Loading query...">  
      <MainContent  
        isRefreshing={isRefreshing}  
        refresh={refresh}  
        queryRef={queryRef}  
      />  
    </React.Suspense>  
  );  
}  
```

--------------------------------

### Fragment Identifier Example

Source: https://relay.dev/docs/glossary

An example of a fragment identifier string containing a persist ID, variables, and a data ID.

```text
1234{"scale":2}/Story_story/{"scale":2}/"4567"
```

--------------------------------

### Fetching a query with useQueryLoader

Source: https://relay.dev/docs/guided-tour/rendering/queries

This example demonstrates using the useQueryLoader hook to load a query in response to an event, such as tab navigation, before the target component renders.

```javascript
import type {HomeTabQuery as HomeTabQueryType} from 'HomeTabQuery.graphql';  
import type {PreloadedQuery} from 'react-relay';  
  
const HomeTabQuery = require('HomeTabQuery.graphql')  
const {useQueryLoader} = require('react-relay');  
  
  
type Props = {  
  initialQueryRef: PreloadedQuery<HomeTabQueryType>,  
};  
  
function AppTabs(props) {  
  const [  
    homeTabQueryRef,  
    loadHomeTabQuery,  
  ] = useQueryLoader(  
    HomeTabQuery,  
    props.initialQueryRef, /* e.g. provided by router */  
  );  
  
  const onSelectHomeTab = () => {  
    // Start loading query for HomeTab immediately in the event handler  
    // that triggers navigation to that tab, *before* we even start  
    // rendering the target tab.  
    // Calling this function will update the value of homeTabQueryRef.  
    loadHomeTabQuery({id: '4'});  
  
    // ...  
  }  
  
  // ...  
  
  return (  
    screen === 'HomeTab' && homeTabQueryRef != null ?  
      // Pass to component that uses usePreloadedQuery  
      <HomeTab queryRef={homeTabQueryRef} /> :  
      // ...  
  );  
}  
```

--------------------------------

### FriendsFragment1 GraphQL query example

Source: https://relay.dev/docs/guided-tour/list-data/connections

An example fragment demonstrating how to access edge-specific properties like 'since' alongside node properties like 'name'.

```graphql
// XXX example only, not final code  
fragment FriendsFragment1 on Viewer {  
  friends {  
    since // a property of the edge  
    node {  
      name // a property of the friend itself  
    }  
  }  
}  
```

--------------------------------

### Invalid multiple 3D selections example

Source: https://relay.dev/docs/guides/data-driven-dependencies/server-3d

This example demonstrates an invalid configuration where multiple 3D selections are used without unique keys, which will cause a build error.

```graphql
# DOESN'T WORK  
fragment Example_comment on Comment {  
  comment_content_renderer @match {  
    ...CommentMarkdownRenderer_comment  
      @module(name: "CommentMarkdownRenderer.react")  
  }  
  attachments {  
    attachment_renderer {  
      ...CommentAttachmentPhotoRenderer_comment  
        @module(name: "CommentPhotoRenderer.react")  
    }  
  }  
}  
```

--------------------------------

### Install eslint-plugin-relay

Source: https://relay.dev/docs/getting-started/lint-rules

Command to add the Relay ESLint plugin to your project dependencies.

```bash
npm install --save-dev eslint-plugin-relay
```

--------------------------------

### Run Relay compiler and development server

Source: https://relay.dev/docs/getting-started/quick-start

Execute these commands to compile your GraphQL queries and start the local development environment.

```bash
npx relay-compiler  
npm run dev  
```

--------------------------------

### App and MainContent Integration

Source: https://relay.dev/docs/guided-tour/rendering/error-states

Demonstrates using useQueryLoader to manage query references and passing the retry logic to the ErrorBoundaryWithRetry component.

```javascript
/**  
 * App.react.js  
 */  
  
const ErrorBoundaryWithRetry = require('ErrorBoundaryWithRetry');  
const React = require('React');  
  
const MainContent = require('./MainContent.react');  
  
const query = require('__generated__/MainContentQuery.graphql');  
  
// NOTE: This is NOT actual production code;  
// it is only used to illustrate example  
function App(props) {  
  // E.g., initialQueryRef provided by router  
  const [queryRef, loadQuery] = useQueryLoader(query, props.initialQueryRef);  
  
  return (  
    <ErrorBoundaryWithRetry  
      // On retry we call loadQuery again, which will update  
      // the value of queryRef from useQueryLoader with a new  
      // fresh query reference  
      onRetry={() => loadQuery(/* ... */)}  
      fallback={({error, retry}) =>  
        <>
          <ErrorUI error={error} />  
          {/* Render a button to retry; this will attempt to re-render the  
          content inside the boundary, i.e. the query component */}  
          <Button onPress={retry}>Retry</Button>  
        </>
      }>
      {/* The value of queryRef will be updated after calling  
      loadQuery again */}  
      <MainContent queryRef={queryRef} />  
    </ErrorBoundaryWithRetry>  
  );  
}  
  
/**  
 * MainContent.react.js  
 */  
function MainContent(props) {  
  const data = usePreloadedQuery(  
    graphql`...`,  
    props.queryRef  
  );  
  
  return (/* ... */);  
}  
```

--------------------------------

### Query specific story

Source: https://relay.dev/docs/principles-and-architecture/thinking-in-graphql

Example query to fetch a specific story by ID.

```graphql
query { story(id: "123") { id, text, likeCount } }
```

--------------------------------

### Configure Network Layer with graphql-ws

Source: https://relay.dev/docs/guided-tour/updating-data/graphql-subscriptions

Example of setting up the Relay network layer to handle subscriptions using the graphql-ws library over WebSockets.

```javascript
import {  
    ...  
    Network,  
    Observable  
} from 'relay-runtime';  
import { createClient } from 'graphql-ws';  
  
const wsClient = createClient({  
  url:'ws://localhost:3000',  
});  
  
const subscribe = (operation, variables) => {  
  return Observable.create((sink) => {  
    return wsClient.subscribe(  
      {  
        operationName: operation.name,  
        query: operation.text,  
        variables,  
      },  
      sink,  
    );  
  });  
}  
  
const network = Network.create(fetchQuery, subscribe);  

```

--------------------------------

### Defining an interface in GraphQL

Source: https://relay.dev/docs/guides/relay-resolvers/defining-types

An example of an interface definition in a GraphQL schema file.

```graphql
# IUser.graphql  
interface IUser {  
  name: String  
}  
```

--------------------------------

### Fetch stories using GraphQL

Source: https://relay.dev/docs/principles-and-architecture/thinking-in-graphql

Demonstrates fetching the same data as the REST example in a single network request using a GraphQL query.

```javascript
graphql.get(`query { stories { id, text } }`).then(  
  stories => {  
    // A list of story items:  
    // `[ { id: "...", text: "..." } ]`  
    console.log(stories);  
  }  
);  
```

--------------------------------

### Example JSON response structure

Source: https://relay.dev/docs/tutorial/queries-1

The expected shape of the data returned by the useLazyLoadQuery hook.

```json
{
  topStory: {
    title: "Local Yak Named Yak of the Year",
    summary: "The annual Yak of the Year awards ceremony ...",
    poster: {
      name: "Baller Bovine Board",
      profilePicture: {
        url: '/images/baller_bovine_board.jpg',
      },
    },
    thumbnail: {
      url: '/images/max_the_yak.jpg',
    }
  }
}
```

--------------------------------

### Relay compiler configuration for Client 3D

Source: https://relay.dev/docs/guides/data-driven-dependencies/configuration

Example configuration block showing the required moduleImportConfig structure with dynamicModuleProvider and surface fields.

```json
"moduleImportConfig": {  
    "dynamicModuleProvider": {  
        "mode": "Custom",  
        "statement": "() => require('./<$module>')"  
    },  
    "surface": "resolvers"  
}  
```

--------------------------------

### Normalized cache representation

Source: https://relay.dev/docs/principles-and-architecture/thinking-in-graphql

An example of how Relay flattens the hierarchical response into a map of records.

```javascript
Map {  
  // `story(id: "1")`  
  1: Map {  
    text: 'Relay is open-source!',  
    author: Link(2),  
  },  
  // `story.author`  
  2: Map {  
    name: 'Jan',  
  },  
};
```

--------------------------------

### GraphQL response example

Source: https://relay.dev/docs/principles-and-architecture/thinking-in-graphql

A hierarchical JSON response corresponding to the story and author query.

```json
{
  "query": {
    "story": {
      "text": "Relay is open-source!",
      "author": {
        "name": "Jan"
      }
    }
  }
}
```

--------------------------------

### App and MainContent Integration

Source: https://relay.dev/docs/guided-tour/rendering/error-states

This example demonstrates using the ErrorBoundaryWithRetry to wrap a component that calls useLazyLoadQuery. The MainContent component receives the fetchKey to trigger a network refetch.

```javascript
/**  
 * App.react.js  
 */  
  
const ErrorBoundaryWithRetry = require('ErrorBoundaryWithRetry');  
const React = require('React');  
  
const MainContent = require('./MainContent.react');  
  
// NOTE: This is NOT actual production code;  
// it is only used to illustrate example  
function App() {  
  return (  
    <ErrorBoundaryWithRetry  
      fallback={({error, retry}) =>  
        <>  
          <ErrorUI error={error} />  
          {/* Render a button to retry; this will attempt to re-render the  
            content inside the boundary, i.e. the query component */}  
          <Button onPress={retry}>Retry</Button>  
        </>  
      }>  
      {({fetchKey}) => {  
        // If we have retried, use the new `retryQueryRef` provided  
        // by the Error Boundary  
        return <MainContent fetchKey={fetchKey} />;  
      }}  
    </ErrorBoundaryWithRetry>  
  );  
}  
  
/**  
 * MainContent.react.js  
 */  
function MainContent(props) {  
  const data = useLazyLoadQuery(  
    graphql`...`,  
    variables,  
    {fetchKey: props.fetchKey}  
  );  
  
  return (/* ... */);  
}  
```

--------------------------------

### Avoid Suspense with fetchQuery

Source: https://relay.dev/docs/guided-tour/refetching/refreshing-queries

This example demonstrates how to use fetchQuery to pre-fetch data and update the store, then trigger a re-render using a store-only fetchPolicy to prevent the UI from suspending.

```javascript
/**  
 * App.react.js  
 */  
import type {AppQuery as AppQueryType} from 'AppQuery.graphql';  
  
const AppQuery = require('__generated__/AppQuery.graphql');  
  
function App(props: Props) {  
  const variables = {id: '4'}  
  const environment = useRelayEnvironment();  
  const [refreshedQueryOptions, setRefreshedQueryOptions] = useState(null);  
  const [isRefreshing, setIsRefreshing] = useState(false)  
  
  const refresh = useCallback(() => {  
    if (isRefreshing) { return; }  
    setIsRefreshing(true);  
  
    // fetchQuery will fetch the query and write  
    // the data to the Relay store. This will ensure  
    // that when we re-render, the data is already  
    // cached and we don't suspend  
    fetchQuery(environment, AppQuery, variables)  
      .subscribe({  
        complete: () => {  
          setIsRefreshing(false);  
  
          // *After* the query has been fetched, we update  
          // our state to re-render with the new fetchKey  
          // and fetchPolicy.  
          // At this point the data for the query should  
          // be cached, so we use the 'store-only'  
          // fetchPolicy to avoid suspending.  
          setRefreshedQueryOptions(prev => ({  
            fetchKey: (prev?.fetchKey ?? 0) + 1,  
            fetchPolicy: 'store-only',  
          }));  
        }  
        error: () => {  
          setIsRefreshing(false);  
        }  
      });  
  }, [/* ... */]);  
  
  return (  
    <React.Suspense fallback="Loading query...">  
      <MainContent  
        isRefreshing={isRefreshing}  
        refresh={refresh}  
        queryOptions={refreshedQueryOptions ?? {}}  
        variables={variables}  
      />  
    </React.Suspense>  
  );  
}  
```

--------------------------------

### Query stories

Source: https://relay.dev/docs/principles-and-architecture/thinking-in-graphql

Example query to fetch stories with their ID, text, and like count.

```graphql
query { stories { id, text, likeCount } }
```

--------------------------------

### List Type Resolver

Source: https://relay.dev/docs/guides/relay-resolvers/return-types

Example of a Relay Resolver that returns a list of scalar values.

```APIDOC
## List Type Resolver

### Description
Defines a resolver that returns a list of values (String array).

### Method
N/A (GraphQL resolver)

### Endpoint
N/A

### Parameters
- **user** (UserModel) - Required - The user object to get favorite colors from.

### Return Type
[String]

### Example
```ts
/**
 * @relayField User.favoriteColors: [String]
 */
export function favoriteColors(user: UserModel): string[] {
  return user.favoriteColors;
}
```
```

--------------------------------

### Scalar Type Resolver

Source: https://relay.dev/docs/guides/relay-resolvers/return-types

Example of a Relay Resolver that returns a scalar boolean value.

```APIDOC
## Scalar Type Resolver

### Description
Defines a resolver that returns a built-in GraphQL scalar value (Boolean).

### Method
N/A (GraphQL resolver)

### Endpoint
N/A

### Parameters
- **post** (PostModel) - Required - The post object to validate.

### Return Type
Boolean

### Example
```ts
/**
 * @relayField Post.isValid: Boolean
 */
export function isValid(post: PostModel): boolean {
  return post.content !== "" && post.author != null;
}
```
```

--------------------------------

### Initialize Watchman configuration

Source: https://relay.dev/docs/getting-started/quick-start

Run this command to create a .watchmanconfig file, which is required if you intend to use the Relay compiler in watch mode.

```bash
echo "{}" > .watchmanconfig
```

--------------------------------

### Define UserQuery for fetching user data

Source: https://relay.dev/docs/guided-tour/reusing-cached-data/filling-in-missing-data

An example query fetching a user by ID.

```graphql
query UserQuery {  
  user(id: 4) {  
    name  
  }  
}  
```

--------------------------------

### @required Directive Usage

Source: https://relay.dev/docs/guides/required-directive

Example of using the @required directive in a Relay query with the LOG action.

```APIDOC
## @required Directive

### Description
Add the @required directive to fields in Relay queries to declare how null values should be handled at runtime. If a @required field is null, Relay bubbles the nullness up to the field's parent.

### Syntax
@required(action: ACTION_VALUE)

### Arguments
- **action** (enum) - Required - Specifies the null handling behavior. Possible values: NONE, LOG, THROW, DANGEROUSLY_THROW_ON_SEMANTICALLY_NULLABLE_FIELD.

### Example
```graphql
query MyQuery {
  viewer {
    name @required(action: LOG)
    age
  }
}
```

### Behavior
- If `name` is null, Relay returns `{ viewer: null }`.
- The field's nullability bubbles up to the parent field.

### Action Values
- **NONE** - Expected null. Nullability bubbles up to parent.
- **LOG** - Not expected null but component can render. Logs `missing_required_field.log` event.
- **THROW** - Should not be null. Component throws during render if null. Only use within error boundary.
- **DANGEROUSLY_THROW_ON_SEMANTICALLY_NULLABLE_FIELD** - Behaves like THROW but can be used on nullable fields. Migration path only.
```

--------------------------------

### Star Wars GraphQL Schema Example

Source: https://relay.dev/docs/guides/graphql-server-specification

A sample schema defining Node, Faction, and Ship types, along with connection and page information structures required for Relay compatibility.

```graphql
interface Node {  
  id: ID!  
}  
  
type Faction implements Node {  
  id: ID!  
  name: String  
  ships: ShipConnection  
}  
  
type Ship implements Node {  
  id: ID!  
  name: String  
}  
  
type ShipConnection {  
  edges: [ShipEdge]  
  pageInfo: PageInfo!  
}  
  
type ShipEdge {  
  cursor: String!  
  node: Ship  
}  
  
type PageInfo {  
  hasNextPage: Boolean!  
  hasPreviousPage: Boolean!  
  startCursor: String  
  endCursor: String  
}  
  
type Query {  
  rebels: Faction  
  empire: Faction  
  node(id: ID!): Node  
}  
```
Tokens:
Raw