relay-hooks

When implementing SSR preloading in Relay Hooks, the choice between loadLazyQuery and loadQuery depends on whether you are using React Suspense:

• With Suspense: Use loadLazyQuery from relay-hooks to prepare queries for a Suspense-enabled environment.
• Without Suspense: Use loadQuery from relay-hooks for standard SSR preloading.

// suspense
import {loadLazyQuery} from 'relay-hooks';
const prefetch = loadLazyQuery();

// no suspense
import {loadQuery} from 'relay-hooks';
const prefetch = loadQuery();

To make your UI more responsive, you can use the Optimistic UI pattern by providing an optimisticResponse in the mutation options.

When an optimisticResponse is provided, the data property of the useMutation hook will contain this optimistic data while the request is in flight (loading: true). Once the server responds and loading becomes false, the data property is updated to contain the actual data sent by the server.

// Example concept of providing an optimistic response
const [mutate, { data }] = useMutation(MyMutation, {
  optimisticResponse: {
    myMutation: {
      value: 'expected value',
    },
  },
});

// When mutate() is called:
// 1. loading becomes true
// 2. data becomes { myMutation: { value: 'expected value' } }
// 3. Once server responds, loading becomes false
// 4. data becomes the actual server response

If you are migrating from Relay's RefetchContainer, note the following improvements in useRefetchable:

1. Automatic Query Generation: You no longer need to manually specify a refetch query; it is automatically generated by Relay using the @refetchable directive on the fragment.
2. Simplified Variables: There is no longer a distinction between refetchVariables and renderVariables. Refetching always uses the provided variables, falling back to original parent query values for any omitted keys.
3. Guaranteed Updates: Refetching via useRefetchable unequivocally updates the component, whereas RefetchContainer updates could depend on the specific query structure and object types.

Because useQuery does not set React context, you must wrap your application (or a specific subtree) in a RelayEnvironmentProvider. This component takes an environment prop and provides it to all descendant hooks. It should typically be rendered once at the root of your application.

Note that variables are no longer part of the context provided by this component.

import { RelayEnvironmentProvider } from 'relay-hooks';

ReactDOM.render(
  <RelayEnvironmentProvider environment={modernEnvironment}>
    <AppTodo/>
  </RelayEnvironmentProvider>,
  rootElement,
);

The usePagination hook is a modern replacement for the legacy PaginationContainer. Key differences include:

• Automatic Query Generation: You no longer need to specify a pagination query; it is automatically generated via the @refetchable fragment.
• Simplified Configuration: No need for getVariables, getFragmentVariables, direction, or getConnectionFromProps. Relay determines these automatically.
• Variable Clarity: Removes the distinction between variables and fragmentVariables. Pagination requests use the original variables plus the necessary pagination variables.
• Bi-directional Support: Supports simultaneous forward and backward pagination natively.
• Reliable Refetching: Refetching unequivocally updates the component, whereas refetchConnection in PaginationContainer behavior could vary depending on the query structure.

To use relay-hooks with Relay, you must install both react-relay and relay-hooks using your preferred package manager.

yarn add react-relay relay-hooks

The development environment supports hot reloading for application logic.

• Application Logic: Changes made to files in the js/ directory will trigger an automatic rebuild and browser refresh.
• Schema Changes: If you modify data/schema.js, you must manually regenerate the GraphQL schema and rebuild the app to reflect the changes. Use the following sequence:

yarn run update-schema
yarn run build
yarn run start

To run the NextJS SSR TodoMVC example, you must first install the dependencies and then ensure the Relay generated files are set up before starting the development server.

1. Install dependencies using yarn.
2. Set up generated files by running yarn followed by yarn compile.
3. Start the local development server with yarn dev.

To run the TodoMVC example project, follow these steps to install dependencies and start the development servers:

1. Install dependencies using yarn.
2. Compile the project using yarn compile.
3. Start the server using yarn server.
4. Start the application using yarn start.