Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

HowToGraphQL.com Notes - Frontend project

26 Aug 2020 🔖 graphql web development
💬 EN

Post Header Image

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
--- ---