Codesandbox sample app review

[hwillson]

We're using codesandbox hosted sample applications in several places in our docs. We need to review all of these to:

1. Make sure they're all still working properly; we've noticed some strangeness with graphql@16 that is causing them to break.
2. Make sure they're all moved over the apollographql codesandbox org.
3. Make sure the codesandbox links in the docs are all still pointing to valid sample apps.

[jpvajda]

I'm going to link to this issue which had a problem on Code sandbox

https://github.com/apollographql/apollo-client/issues/9846

[alessbell]

Also linking to our docs example repo which @StephenBarlow mentioned can be used to back individual sandboxes so we can update them via PRs https://github.com/apollographql/docs-examples 🎉

[MrDoomBringer]

Here's another issue related to this https://github.com/apollographql/apollo-client/issues/9659 (shoutout alessia!)

@alessbell fix in this thread worked. Some changes we can make to the error-template repo:

1. The graphql@16 module seems to not transpile correctly on codesandboxes, see this for example. I think we can just revert graphql back down to 15.x until this is fixed

2. Codesandbox seems to no longer want *.jsx files as entrypoints, though I can't find this actually written anywhere. Very strange. Given that the fullstack tutorial uses Typescript, I think we can kill two birds with one stone and convert the index.jsx file to an index.tsx file, both letting it actually render, and putting it in a language which most apollo-client users are probably using anyways.

CC @hwillson

Edit: Regarding issue 9659, everything seems to be an issue with codesandbox. Downloading the CS to local and running works fine.

[jpvajda]

@MrDoomBringer just curious on this finding:

The graphql@16 module seems to not transpile correctly on codesandboxes, see this for example. I think we can just revert graphql back down to 15.x until this is fixed

Is this something we should make someone at Codesandbox aware of? Do we feel it's an issue on their end?

[MrDoomBringer]

@jpvajda great question! Given that this only affects versions after 16, I suspect it's an issue on the graphql module's end. I went ahead and opened an issue here. Let me know if you feel otherwise and I'll be happy to open an issue on Codesandbox as well, though!

[MrDoomBringer]

PR for this open here. I went with the slightly more elegant solution of just manually setting index.jsx as the entrypoint for the project.

There was talk of create-react-app not supporting *.jsx as a default entrypoint here many moons ago, and I suspect they may have made good on that claim.

[alessbell]

There was talk of create-react-app not supporting *.jsx as a default entrypoint https://github.com/facebook/create-react-app/issues/3052 many moons ago, and I suspect they may have made good on that claim.

Does that mean we need to use this workaround? https://github.com/facebook/create-react-app/issues/3052#issuecomment-330868560

[MrDoomBringer]

Does that mean we need to use this workaround

Nope! We can just set "main":"index.jsx" in the package.json, which feels more straightforward.

[MrDoomBringer]

Moving the error-template repository over to our docs-examples repo with this PR: https://github.com/apollographql/docs-examples/pull/48

[hwillson]

@MrDoomBringer I believe we can close this out now that all code sandboxes have been updated. Thanks for all of your work on this!