Add loader for .graqhql files

[patrick91]

Closes #269

See: facebook/create-react-app#3909

[bahkostya]

Can somebody from maintainers look at this pull request Please? @DorianGrey, @wmonk
Thanks in advance

[harrisrobin]

Yes, need this please.

Thank you!

[DorianGrey]

I'm very sorry for this delayed reponse - I've been quite busy the last couple of weeks and didn't have the time to look into this as precisely as it deserves.

Most things are looking fine, apart from the two issues mentioned (where only one is critical).

Side note: @wmonk , even though this would be "pre-picking" of a CRA 2.x feature, I suppose it's not that unlikely, esp. since it cuts down a bit of merging work for that version ... ;)

[DorianGrey]

Is there any particular reason that this loader is only registered in dev, but not in prod mode? (See the webpack.config.prod.js)

[DorianGrey]

Suppose this note is not required here, since this PR results in some kind of "pre-picking".

[simsim0709]

Hi, @patrick91

Are you still working on this pr? If not, I would like to make a pr again, cuz I need it for my project.

Thank you

[patrick91]

I'll finish this in the weekend if that's ok :)

[simsim0709]

Yop. No problem. Thank you for this pr!! 😀

[eddiemoore]

Any progress on this?

[patrick91]

Sorry folks! I was travelling, I just pushed the changes, thanks for the nudges @eddiemoore @simsim0709 :)

@DorianGrey this should be fine to merge now, as soon as I fix the failure on travis ci :)

[patrick91]

Ok, I'm not sure why it fails, @DorianGrey can you tell me how to run the single failing test locally? I had troubles with docker unfortunately

[DorianGrey]

You may just run tasks/e2e-kitchensink.sh in the project root. Beware that this is a bit unstable in case it is executed multiple times in a non-isolated environment, since the scripts are using a local yarn repository to publish the packages, and that may cause version collisions. However, due to the same issue, its a bit complicated to execute one of the test cases of that suite in isolation.

The particular test that seems to fail in your case is this one: https://github.com/wmonk/create-react-app-typescript/blob/master/tasks/e2e-kitchensink.sh#L144
Yet I'm a bit surprised of why - the result indicates that the graphql file was picked up via file-loader, which should not be responsible regarding the webpack configuration.

[patrick91]

@DorianGrey yeah, I saw that, I was able to run the kitchensink locally but with no luck, it seems like it using an old version of the scripts, I even tried to delete the config and it didn't break, mmh, let me try again

[patrick91]

@DorianGrey it seems that we need to pass --scripts-version=react-scripts-ts to

npx create-react-app --internal-testing-template="$root_path"/packages/react-scripts/fixtures/kitchensink test-kitchensink

so it will load the correct scripts, but the test fails still, with a different failure

/v/f/g/_/T/t/test-kitchensink (py3.6) REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
  NODE_PATH=src \
  PUBLIC_URL=http://www.example.org/spa/ \
  yarn build


yarn run v1.6.0
$ react-scripts-ts build
fs.js:987
  return binding.stat(pathModule._makeLong(path));
                 ^

Error: ENOENT: no such file or directory, stat '/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/tsconfig.json'
    at Error (native)
    at Object.fs.statSync (fs.js:987:18)
    at resolveConfigPath (/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/node_modules/tsconfig-paths/lib/tsconfig-loader.js:41:12)
    at loadSyncDefault (/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/node_modules/tsconfig-paths/lib/tsconfig-loader.js:19:22)
    at tsConfigLoader (/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/node_modules/tsconfig-paths/lib/tsconfig-loader.js:13:22)
    at configLoader (/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/node_modules/tsconfig-paths/lib/config-loader.js:27:22)
    at Object.loadConfig (/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/node_modules/tsconfig-paths/lib/config-loader.js:8:12)
    at new TsconfigPathsPlugin (/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/node_modules/tsconfig-paths-webpack-plugin/lib/plugin.js:20:42)
    at Object.<anonymous> (/private/var/folders/gy/_nycm7nx4zd45ldqdz5lzhk40000gn/T/tmp.hTn8c68y/test-kitchensink/node_modules/react-scripts-ts/config/webpack.config.prod.js:134:7)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
error Command failed with exit code 1.

[DorianGrey]

Hm... I'm not sure about adding this, since --internal-testing-template refers to a particular template that is used for the tests (in packages/react-scripts/fixtures/kitchensink). That particular template does not include any typescript related stuff.
That's why adding --scripts-version=react-scripts-ts does not work for that test: this parameter overwrites the template used for the test, thus there is no tsconfig.json as the build script expects.

[patrick91]

Yup, but without it we are testing the wrong scripts right? I'm happy to do another PR with the updated tests if that's ok :)

[DorianGrey]

The --internal-testing-template overwrites the template used during the init process on project generation, ignoring the one caused by the --scripts-version option. The resulting project contains this enforced template, but still utilizes the build configuration provided by the scripts package.

It might take a little more to set this up properly, i.e. not only modifying the generation command, but the whole particular template. PR is welcome, though 👍

[heresandyboy]

Hi, I have been trying to figure out how to use .graphql files in create-react-app-typescript. My investigations have led me to this PR - was support for loading .graphql ever implemented? Are there any workarounds available? My main reason for switching from .ts files using gql`` is so that I can easily use fragments.