Basic React Router v6 and Relay integration

gistfile1.txt

/**
 * This may not be the most ideal way, but it works for me.
 * 
 * You have to use one of their data routers in order to support loaders. https://reactrouter.com/en/main/routers/picking-a-router
 *
 * Then you can use loaders https://reactrouter.com/en/main/route/loader
 * 
 * I played around with it for a while and eventually came up with something like this.
 */

// Add a route to you data router.

<Route path="users" element={<Users />} loader={usersLoader} />

// Create your route component and define your query, loader and Page component

const query = graphql`
  query UserQuery {
    viewer {
      ...SomeListComponentFragment
    }
  }
`;

export const usersLoader = () => {
  return routeDataLoader<UserQuery>(query, {}, { fetchPolicy: "store-and-network" });
};

export default function UsersPage() { 
  const { data } = usePreloadedLoaderData<UserQuery>(query);


  return <SomeListComponent user={data?.viewer} />
}


// Utility hooks in order to simplify the process and add types, it could be better?
export const routeDataLoader: <TQuery extends OperationType>(
  preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
  variables?: VariablesOf<TQuery>,
  options?: LoadQueryOptions
) => PreloadedQuery<TQuery> = (preloadableRequest, variables, options) => {
  return loadQuery(environment, preloadableRequest, variables || {}, options);
};

export const usePreloadedLoaderData: <TQuery extends OperationType>(
  gqlQuery: GraphQLTaggedNode
) => PreloadedQuery<TQuery> & {
  data: TQuery["response"];
} = <TQuery extends OperationType>(gqlQuery: GraphQLTaggedNode) => {
  const preloadedQueryRef = useLoaderData() as PreloadedQuery<TQuery>;

  return {
    ...preloadedQueryRef,
    data: usePreloadedQuery(gqlQuery, preloadedQueryRef),
  };
};