Exemple preload Relay

Lorsque le contexte router porte un environnement Relay, les fonctions prepare peuvent precharger des queries avant le rendu de la page.

import { loadQuery, type PreloadedQuery } from 'react-relay';
import { type Environment } from 'relay-runtime';
import { type RoutePrepare } from '@plumile/router';

import {
  ProjectPageQuery,
  type ProjectPageQueryType,
} from '../queries/ProjectPageQuery.js';

export type AppRouterContext = {
  relayEnvironment: Environment;
};

export type ProjectPagePrepared = {
  query: PreloadedQuery<ProjectPageQueryType>;
  organizationSlug: string;
  projectSlug: string;
};

export const prepareProjectPage: RoutePrepare<
  AppRouterContext,
  ProjectPagePrepared,
  { organizationSlug: string; projectSlug: string }
> = ({ context, variables }) => {
  const query = loadQuery<ProjectPageQueryType>(
    context.relayEnvironment,
    ProjectPageQuery,
    {
      organizationSlug: variables.organizationSlug,
      projectSlug: variables.projectSlug,
    },
  );

  return {
    query,
    organizationSlug: variables.organizationSlug,
    projectSlug: variables.projectSlug,
  };
};

Retournez la reference de query et les variables de route necessaires a la page. Gardez la creation de l’environnement Relay hors du module de routes et passez le via le contexte router.

Pour la configuration Relay backoffice, voir Relay backoffice.