tobias-tengler / create-relay-app

Relay setup automation for CRA, Next.js and Vite

Hi there 👋🏻

My name's Tobias and I'm a Software developer from Germany with a passion for anything OSS.

If you want to talk about my favorite technologies, React and GraphQL, or just have a quick chat, hit me up on twitter @tobiastengler 🚀

create-relay-app's Issues

Optionally configure for @defer / @stream (experimental)

Support for Remix

Do not re-run install commands on subsequent runs

NextJS: `Module not found: Can't resolve 'relay-runtime'`

Seems like relay-runtime isn't added in the package list, causing npm run dev or yarn dev to fail. When I manually added relay-runtime NextJS says everything compiled successfully.

-I/--interactive does not work

I want to enable subscriptions but -I/--interactive does not work

Request ownership transfer of create-relay-app package

The create-relay-app package is currently taken by https://www.npmjs.com/package/create-relay-app

The package hasn't been updated in 5 years and seems to have no active users.

Therefore I think it's reasonable to ask, if the owner of the package can transfer ownership over the package to us, so we can publish this package under its name.

[Next] Properly configure environment for SSR/SSG

Next.js 13 app directory?

Would be awesome if this could support installing Relay into Next.js 13 project using app directory

Add Relay plugin configuration: Unexpected error

After setting up next and running npx @tobiastengler/create-relay-app and selecting the next option, this output appears:

test [main] % npx @tobiastengler/create-relay-app
? Select the toolchain your project is using Next.js
? Select the language of your project Typescript
? Select the path to your GraphQL schema file ./src/schema.graphql
? Select the package manager you wish to use to install packages npm

✔ Add Relay dependencies: react-relay
✔ Add Relay devDependencies: relay-compiler @types/react-relay
✔ Add Relay configuration to package.json
✖ Add Relay plugin configuration   Unexpected error

### NEXT STEPS ###
1. Replace ./src/schema.graphql with your own GraphQL schema file.
2. Replace the HOST variable in the RelayEnvironment.ts file.

Not sure why the last step yields Unexpected error.

Friendlier error message on missing package.json

Just saw your comment here and wanted to take for a spin! I too agree that Relay has some onboarding issues.

One issue I just encountered was after running npx @tobiastengler/create-relay-app and then getting the error Error: package.json file is missing. I initially thought that this would bootstrap whatever framework the user chose before setting up the Relay bits (eg, npx create-next-app), so seeing that issue was a bit confusing. Maybe something like

Error: package.json file is missing. Did you remember to setup <create-react-app|next|vite> before running this command?

Would fix the issue.

Generate .gitattributes for EOL of artifacts

Paths are not auto completed in inputs

Add Playwright integration tests

App creation fails if yarn isn't installed, even if yarn isn't selected or used for running create-relay-app

Here's the error log:

Command "npm install --save-exact --save-dev relay-compiler@latest @types/react-relay@latest @types/relay-runtime@latest babel-plugin-relay@latest vite-plugin-relay@https://github.com/tobias-tengler/vite-plugin-relay#tte/fix-plugin" failed

npm ERR! code 127
npm ERR! git dep preparation failed
npm ERR! command /home/dev/.nvm/versions/node/v16.16.0/bin/node /home/dev/.nvm/versions/node/v16.16.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/home/dev/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm ERR! > [email protected] prepare
npm ERR! > husky install && yarn build
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! fatal: not a git repository (or any of the parent directories): .git
npm ERR! sh: line 1: yarn: command not found
npm ERR! npm ERR! code 127
npm ERR! npm ERR! path /home/dev/.npm/_cacache/tmp/git-cloneUKSqXM
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command sh -c husky install && yarn build
npm ERR! 
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR!     /home/dev/.npm/_logs/2022-09-07T18_54_35_818Z-debug-0.log

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dev/.npm/_logs/2022-09-07T18_54_31_413Z-debug-0.log

Seems like probably the command sh -c husky install && yarn build is making the whole thing fail.

Looking at the README, the first step is only using yarn:

1. Scaffold a new project using the toolchain of your choice (as long as it's supported)
   • Next.js: yarn create next-app --typescript
   • Vite.js: yarn create vite --template react-ts
   • Create React App: yarn create react-app <new-project-directory> --template typescript

But the 3rd steps shows that any package manager can be used:

3. Run the script inside of the scaffolded directory:

npm/yarn/pnpm create @tobiastengler/relay-app@latest

I think there maybe should be a clearer note in the docs that a yarn installation is also required for running the command in the 3rd step.

Optionally configure graphql-ws

Support for Vike/vite-plugin-ssr

It would be nice to have integration between create-relay-app and Vike/vite-plugin-ssr since create-relay-app currently works with Vite but not with Vike/vite-plugin-ssr

Add option to integrate with vite-plugin-relay-lite

vite-plugin-relay-lite has some advantages like providing smooth integration with the Relay compiler, and transforming the code really fast. While I think it shouldn't be recommended in general (since it doesn't actually parse AST, which makes it break on some cases), I believe it's worth adding an option for it.