05/04/2021 - graphql server

this is the javascript nodejs express server side implementation

i wanted something similar very close to just nodejs only and no apollo to avoid adding packages

but majority of tutorials on the net use apollo

purpose of graphql

• implementation agnostic, flexible
• easier to do more complicated queries
• self documenting
• what you see if what you get
• reduce proliferation of endpoints
• client side can define their own data api
• so graphql will add a layer of customisation help you do joins and nested queries

reading

• sdl/ast/syntax/language - https://graphql.org/learn/
• schemas and types
• queries and mutations
• js implementation - https://graphql.org/graphql-js/
• running express and graphql
• clients

youtube tutorial applying the above
https://www.youtube.com/watch?v=Vs_CBxCfFHk

express-graphql npm

file structure for backend

• your server file
• express-graphql, graphhttp
• schema file
• gql tag or template strings
• resolver file
• plain js functions
• or you might even want to split up the schemas or resolvers into different files.
• mongoose models schema
• you still need those

file structure for the frontend (react, redux)

• use fetch or axios
• the endpoint is 'api/graphql', the single route you created with express-graphql

code

1. backend
1. schema for objects, interfaces, queries and mutations
2. resolvers
3. the package's graphhttp accepts those two above
4. the package ships with graphiql for you to test queries
2. front end 
1. queries, variables
2. redux actions and fetch or axios to fetch data from the endpoint

1. schemas and types - declaring using the graphql syntax or sdl
1. theres more than one way to do it, and the sdl way is the native way
1. write in SDL way in graphql.org/learn, 
2. dont use the npm graphql way import graphqlobjecttypes
2. understanding types and schema - types and schema vs REST and MVC
1. M for model in MVC - types you need - object, scalars
1. graphql object type aka documents or entities
1. syntax: `type [name]{...}`
2. graphql scalars type (string, bools etc), concrete 
1. String,Int, Boolean,[],ID
2. they also have enums
3. they are used in the document fields to set the data type
2. queries,mutations, inputs
1. mutations are update/delete/create or post/put/delete of CRUD and rest api requests
2. inputs are objects to go into mutation args, less messy code
3. queries are read/get of crud/rest 
3. additional 
1. validation
1. ! in graphql means a field is required aka nonnull
2. directives and fragments
1. @include directive can be used for user auth i guess
3. interface, unions, fragments
1. interface are more abstract objects eg person vs user, star wars character vs human/droid, you use the interface type and the implement keyword
1. declare interface type
2. new object type extends interface type
2. fragments are reusable units
1. use the fragment declaration and the on keyword, and the spread ... operator to include the fragment in the type schema body
3. inline fragment
1. a little confusing
2. but if you do a query type
4. considerations
1. since the sdl is not js, but there is still a way to work around without packages
1. use template strings
2. gql tag
3. use the {print} in graphql to convert ast to string
4. vscode extensions
1. graphql extension
2. reads .graphql file, or gql`...` strings as graphql, you get the colorisation and formatting with prettier
3. hack, you can temporarily append the gql tag to your template string without adding the graphql tag package, make sure you remove it later on
5. to modularise your code
1. export a const containing the string
2. if you have multiple separate schemas, you can use .join()
2. resolvers
1. plain javascript functions 
2. much like the body of rest api controller
3. you can bring in your mongo/mongoose queries at this level
1. find, findOne, create etc
4. make use of js filter higher order function
3. queries
1. on the schema
1. args, name of the object type they return eg. course, post, comment
2. on the frontend/graphiql
1. names- you can name that query for error tracing
2.  $variables - you don't need to hardcode the values coming from your frontend, define variables with the $ prefix. 

theres a cheatsheet here for the SDL

https://github.com/sogko/graphql-shorthand-notation-cheat-sheet/raw/master/graphql-shorthand-notation-cheat-sheet.pdf

picture notes from vscode

o schema

note that you have the add the gql tag to read it as graphql and remove it to turn it back into js template strings

o resolvers aka root

o

o

picture notes from graphql.org/learn

o input and mutation

o working with interfaces (abstract objects) and inline fragments

o working with reusable fragments

o adding variables to queries

picture notes from graphql.org/graphlql-js

o

o

o

//backend

todos

mongo queries

user auth

pagination

//frontend

edit redux action to use the single endpoint and add in graphql queries

additional readings

article on how to use graphql with mongodb

https://medium.com/the-ideal-system/graphql-and-mongodb-a-quick-example-34643e637e49