HowToGraphQL.com Notes - Frontend project
26 Aug 2020

Oooookay, here we go trying to build https://www.howtographql.com/react-apollo/1-getting-started/
Already stuck here:
c:\example\graphqlfront>yarn create react-app hackernews-react-apollo
'yarn' is not recognized as an internal or external command,
operable program or batch file.
Have to see where my node modules are installed:
MINGW64 /c/example/graphqlfront
$ npm list -g | head -1
C:\Users\MY_USERNAME\AppData\Roaming\npm
So Yarn should be at C:\Users\MY_USERNAME\AppData\Roaming\npm\node_modules\yarn
. It’s not.
c:\example\graphqlfront>npm install --global yarn
Okay, now it’s there.
And now this works:
c:\example\graphqlfront>yarn create react-app hackernews-react-apollo
It set up C:\example\graphqlfront\hackernews-react-apollo
and filled it with:
.
├── node_modules
│ └── (lots of subdirectories)
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
Next up:
c:\example\graphqlfront>cd hackernews-react-apollo
c:\example\graphqlfront\hackernews-react-apollo>yarn start
Yup, I see a web page at http://localhost:3000/
telling me to edit /src/App.js
, save my work, and reload the pages if I want to see changes, and encouraging me to learn React.
Now the tutorial wants me to create styles
& components
folders inside /src/
, to move App.js
inside components
, and to move the .css
files inside styles
– and then to alter the filepath references to the logo & CSS & App.js in /src/index.js
and /src/components/App.js
. Done.
Styling imports & tweaks: done.
On to yarn-installing a bunch more packages (I totally want to steal HowToGraphQL’s command-line instructional styling, BTW):
yarn add apollo-boost react-apollo graphql
And now I edited /src/index.js
as specified in “Configure ApolloClient.”
Darrik says I should be able to blast right through the tutorial’s Getting Started, Queries, Mutations, and Routing sections, hitting problems when I get to Authentication.
No, wait – I’m in “Backend” - “Downloading the server code”, and it sounds like everyone was having trouble with hosting the database on Prisma, and that I should use some sort of “docker instructions” for the backend instead.
Darrik thinks everyone else used the “demo app” but had some issues – he’s hoping following these Docker instructions might help him have fewer issues.
Okay, so … I think I need the Prisma CLI tool either way, so I did:
npm install -g prisma