@tobiastengler/create-relay-app

create-relay-app

Easy configuration of Relay.js for existing projects

Motivation

Setting up Relay can be quite time consuming. The goal of this project is to automate all of the manual setup steps involved, to give you a fast and consistent configuration experience across the most popular React toolchains.

Supported toolchains

create-relay-app supports:

• Create React App (WIP)
• Vite.js
• Next.js

Usage

Once you have scaffolded a project using your preferred toolchain of choice, simply execute the @tobiastengler/create-relay-app script in the directory of your project:

npx @tobiastengler/create-relay-app@experimental

Note: We are working on getting the create-relay-app name!

This will prompt you for a bunch of questions around your project setup. If you do not want to specify these options interactively, you can also specify them through the CLI arguments. Passing -y will infer all settings based on your project.

CLI arguments

npx @tobiastengler/create-relay-app [options]

-y, --yes

Skips any prompts and chooses default values for options that weren't supplied as CLI arguments.

-t, --toolchain <toolchain>

The toolchain, e.g. bundler and configuration, your project was setup with.

Possible values

• cra Create React App
• vite Vite.js
• next Next.js

Example

--toolchain vite

--typescript

If specified, we assume your project is built with Typescript.

-f, --schema-file <path>

Specifies the location of the GraphQL schema file inside of your project directory.

Possible values

A path relative to the root directory of your project and ending in the .graphql extension.

Example

--schema-file ./src/schema.graphql

-s, --src <path>

Specifies the source directory of your project, where the Relay compiler will be run on.

Possible values

A relative path to a directory inside the root directory of your project.

Example

--src ./src

-a, --artifact-directory <path>

Specifies a directory, where all artifacts generated by the Relay compiler will be placed.

Possible values

A relative path to a directory inside the root directory of your project.

Example

--artifact-directory ./src/__generated__

-p, --package-manager <manager>

Specify the Node.js package manager to use when packages need to be installed.

Possible values

• npm
• yarn
• pnpm

Example

--package-manager yarn

--ignore-git-changes

If specified, the script will not exit, if it's run in a directory with un-commited Git changes.

-v, --version

Displays the current version of the script.

-h, --help

Displays information about all of the available options.

Default values

If certain options are not specified as CLI arguments, we try to infer most of them from the directory you ran the script from.

--toolchain

If the next package is installed, we assume it's a Next.js project, unless specified otherwise.

If the vite package is installed, we assume it's a Vite.js project, unless specified otherwise.

Otherwise, we assume it's a Create React App project, unless specified otherwise.

--typescript

If the typescript package is installed or there is a tsconfig.json file in the root directory of your project, we assume you are using Typescript, unless specified otherwise.

--package-manager

If you run the script using yarn or pnpm, we use them as the default.

If we can't determine which package manger has run the script, we choose:

• yarn, if yarn is installed and a yarn.lock file exists at the root of the project.
• pnpm, if pnpm is installed and a pnpm-lock.yml file exists at the root of the project.
• npm in all other cases.

--src

If the toolchain is next, ./, otherwise ./src, unless specified otherwise.

--schema-file

If the toolchain is next, ./src/schema.graphql, otherwise the value of --src joined with schema.graphql, unless specified otherwise.

--artifact-directory

If the toolchain is next, ./__generated__, otherwise it's not specified, unless specified otherwise.

--yes

false, unless specified.

--ignore-git-changes

false, unless specified.