graphql-react

graphql with react udemy tutorial. starter project code cloned from Lyrical-GraphQL.

technologies

json-server

• quick setup server for development
• runs on sep localhost 3000
• later changed to mongoose as the real database

nodemon

• npm run dev script
• helps to refresh server on change

udemy notes / bugfixing

section 25: query fragments in GraphiQL. saving for future ref:

{
  apple:company(id:"1"){
    ...companyDetails
  },
  google:company(id:"2"){
    ...companyDetails
  }
}

fragment companyDetails on Company {
  id
  name
  description
}

section 34: mongoDB setup

ran into some deprication issues: found solution here https://mongoosejs.com/docs/deprecations.html

passed the following options into mongoose.connect()

{
  useNewUrlParser: true,
  useUnifiedTopology: true,
}

section 34

error:

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

fix: webpack configuration added { mode: "development" } to webpack.config.js

error:

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

fix: npm install @babel/preset-react @babel/plugin-syntax-jsx create bable.config.json and add to it:

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

git issues soln source

babel config

error:

butt load of dependencies being outdated

fix:

npm-check-updates module

error:

Uncaught Invariant Violation: In order to initialize Apollo Client, you must specify 'link' and 'cache' properties in the options object. These options are part of the upgrade requirements when migrating from Apollo Client 1.x to Apollo Client 2.x.

fix: npm install apollo-boost and import ApolloClient from that module instead of from 'apollo-client' module.

Section 44 Changed import {Router, Route, hashHistory, IndexRoute} from "react-router" since hashHistory and IndexRoute are deprecated from React Router v4

originally changed to:

import { Route, Router, Switch } from "react-router-dom";
import history from "./history";

updated to: ended up using HashRouter and createHashhistory instead since Router was giving different issues. tutorial uses hash routing. but it's noted to be sort of 'hacky' as a fix here

import { Route, HashRouter, Switch } from "react-router-dom";
import history from "./history";

and

import { createHashHistory } from "history";
export default createHashHistory();