From f70fca70b7d558e2cffec4fb819c608670de6ecc Mon Sep 17 00:00:00 2001 From: TonyWu1998 Date: Sat, 6 Jun 2020 17:16:39 -0500 Subject: [PATCH 1/5] new branch created for fetch apis --- .DS_Store | Bin 0 -> 10244 bytes IMC_GraphQL/.DS_Store | Bin 0 -> 6148 bytes IMC_GraphQL/IMC_TonyWu1998/.DS_Store | Bin 0 -> 6148 bytes .../proposal.md | 11 +++++++++++ 4 files changed, 11 insertions(+) create mode 100644 .DS_Store create mode 100644 IMC_GraphQL/.DS_Store create mode 100644 IMC_GraphQL/IMC_TonyWu1998/.DS_Store create mode 100644 IMC_GraphQL/IMC_TonyWu1998/How to fetch data from GraphQL APIs /proposal.md diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7e1a79f229a009bbaa1cffad48f608786ea721db GIT binary patch literal 10244 zcmeHM&2Jk;6n~q~jT1zqenl0BJrJo>R9fv50j}Rk*1jzN;Zft42>-wW< z>l*pQ0f`e5Du_d`@MnYz96534#0l{qz;9+J>v{VT=R)By6V1Ny&U-WO_nX<7c@rYC z3jNv!kwZi_vXIM5c%&pzFLEMHsW*2aE!dNHyiuwKt#(4wyf6$H1`Gp+0mFb{;Qzt^ z_H2>t#Za23VZbn87>F1U>w|+VWM0WpDCN?DhYSHAXYg7kl$S*T(or(6UFK4SaiL>#XI}=U$5@1zIA$!*VoRiZ#T5NfiGUbl;+R+r3UrMWxdnu zUnMnkANr@KqT0NWUA?{2^PDqn+R4?dV9qZvS+KRO?AcnXbVR%5^bEJM=ykX&28UdJpoDN->`W zy5}0YD^vv+K6t6iXASZZcNCo==GN7FwS*pSEo2r=+&~dUYRcE z>e8QRm(}ZRT^dAe#dOBAB1?xe=AavzrhR&sc9O`Lw@Qoqxh1|WRik_OcrNlVsvY~5 ztmR%E2(RqWD=O1HIzTy%&Bq#>34QMA;?1-+b)WZ^BA*j&=`-;>J&r@p$5$g9Ma-fe zatX7oDQ8-h>M5-2s3us)Fzx~41PdMUYnLO$6RpOhcX6u}HWni`_VATd@O3rl1A2$E zU|q+l>!vog8CLE|x2@K!U);9W?Dp2zf3v2hXJ+T-Z98Y@Udeq{Y6K^xUZvOX7Al=j z#IJ)&ui>ilhe6;)<%;`Jvwl)uzPuCoy-L%sccgK%R)@-`M@_#LoD_n-U+c_b)|01$XT#6G6>}R4fjZ-1 zxOn;wKQrL+!Cn!k!VFD)kar%e{G~RLOzrXDPS)mw>Im;M+I>{&_+H>2LqnjQjfVb^ z54YHCtUt8j)-*Zh)$e&bI?g9=N0V8z*FW5J4UXppI-p$S=@C9t7n=#TgP6})_?geC zHr#u8>`&FxaSY25jtt%LXid`P*wpse#5PvNhv(t*^HVo9jK|c++IZNosN=7PWy{Br zA-)uYi}Uq44|4->oM=<$;Q2QZ2Pt}E{O9R$?CWA&SAe5QS_o!z3*m)Hh5^HXVZbo(5*U~c`*6hl|8DmG z|6hV9rVGP>Vc@@Fz?vzRiUst37I(!R5qIql@_l5Hgx)BW(gY8A9S-%$ZT`Rh&ww(Hr78Cf`Z4?Bk-Q#8UEGQv!DaZ75i0WF%EbTj WLJm<0yCmUJl!^c8P@l{x(fvQF{vDD4 literal 0 HcmV?d00001 diff --git a/IMC_GraphQL/.DS_Store b/IMC_GraphQL/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..cf7ff22d36dd28e32e2c42cb47fdb4426d7a7593 GIT binary patch literal 6148 zcmeHK!EV|>5S=BoS%}(lh?E?C$t?#EZJ~!q4xy1aRH|gu9NGwMjKGrdA}~QIrSdJ` zkbF*V`GVf_1^IwV?d65gsAm(AsX6K(AcAu^fzd*?=`acy1^zV!S z^W-9NfnNWi45KAnZ#?W1_r~jo!7$F}zp>Ot`pMHx&a*uGEPLv7#n_46cr>iIgOBp+ zy&HEuit9pzzhc+>5VXgQ-1d=(VmFA|14Rz}Hl}%-+7e`QX;yV`S|IfEz^Q3s!8rp3LIOt}6E(BI0p z*1r@}fllxGtr8Z{jl9X=S{nb8S_sk`I+mP!X^Yc#DoQDv(?8F1j)tvt)p16DAt52hDs4 NC>cy+6!@zO`~-P7ip~H4 literal 0 HcmV?d00001 diff --git a/IMC_GraphQL/IMC_TonyWu1998/.DS_Store b/IMC_GraphQL/IMC_TonyWu1998/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1c8237f07b5d3a1b7b53090702f35f385b9f9faf GIT binary patch literal 6148 zcmeHKOHKnZ40T|HMs(99%PbK4-e6h{g-R?yy#W0{D>2hlrN9o&9k>yP;5zW^c+qNL z*FhB7lKnhRoX@KgH$>!mPty)jn}|{w9)aG^X9mD z9nzf7@;7}Lq=o#DKJ`&#o Date: Sat, 13 Jun 2020 14:20:18 -0500 Subject: [PATCH 2/5] new proposal updated --- IMC_GraphQL/IMC_TonyWu1998/.DS_Store | Bin 6148 -> 6148 bytes .../proposal.md | 18 ++++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/IMC_GraphQL/IMC_TonyWu1998/.DS_Store b/IMC_GraphQL/IMC_TonyWu1998/.DS_Store index 1c8237f07b5d3a1b7b53090702f35f385b9f9faf..bdbb0f514015b797dce321721e45160d3a51633a 100644 GIT binary patch delta 251 zcmZoMXfc@J&&a+pU^g=(`{WBOK9eI@GU}7ciwlx+@{<@C7)~Y? Date: Sat, 13 Jun 2020 14:26:43 -0500 Subject: [PATCH 3/5] new branch for visual graphql --- IMC_GraphQL/IMC_TonyWu1998/.DS_Store | Bin 6148 -> 6148 bytes .../Visualing the ideas of GraphQL/.DS_Store | Bin 0 -> 6148 bytes .../proposal.md | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 IMC_GraphQL/IMC_TonyWu1998/Visualing the ideas of GraphQL/.DS_Store rename IMC_GraphQL/IMC_TonyWu1998/{How to fetch data from GraphQL APIs => Visualing the ideas of GraphQL}/proposal.md (100%) diff --git a/IMC_GraphQL/IMC_TonyWu1998/.DS_Store b/IMC_GraphQL/IMC_TonyWu1998/.DS_Store index bdbb0f514015b797dce321721e45160d3a51633a..037b7d003ccf2f95ae47ace99ec8de9e79a974ef 100644 GIT binary patch literal 6148 zcmeHK&2G~`5T0!U-2@?WK%y7WUbyw(l%J{xBohLt5(kh`IRI+yIwY1HuN6CuN=W5* z-~^Au39ejt4c-7|cBiOSKteJ?i0();-|WuLSo2xy^#XwCP2(;=2LL20VY7|qCqi-3 zC0XH_RYYNGgpfi484N)!t#%WR0ms0<#sKZzYp{d6wty*|+`lD^V1WBLffzBwxB?BY z&_09-j&qDZfk)e^-j7lpVIBI2yhT0wW(2*OwWC>)bL~%2o+d@ljPxuh!*W{m!pU0J^-xbw7L&9y#3umZj*Q#T{G4Oi~(Dy;168emlMf2%EW3B**O`JA@ zKK%wzj$-r~D~lLG5jGXkrV74d2%C=cir4v!l|`Elf-fI}pDg%>BFxjVzB0=}_!gaY z3^)c(GtjWZ4xRt^e|`Tyo#aN20ms09#eit`gMJTN;K-Zyt*b1W6f}Gs g8;6eKHB=)QQ{*7}jFm;4L2*9U;yo$?(x z!N=jo7l4lgKmRG(RJe6eAwTK)_x$Yl?EEa-F%hxuBhF)V>4=IBu zMf($ajQTzuQlE0-{a6fwSOmx^50sD4(;rG;EpeQn%u_SY*C36fylA(-v$gfwrOO+R z({LJB8n3*OD80fjCVAJ-UdY;^UyK4{KNTYWW&6RiXjmRKuiY0(;YZ0ZQ^8R9T73KN?OBUY_x9Q?erJ1kHmf_=Z+7nWkH_!c zPe05~KPd``F^zQ9;2b`~SlU9wCmnAf#_2ryGINhbuV=`2z8$>Tymjzpf4TX?3(cR7 zE{>bGUY5inIRPK@bw0BMt7e)hI-9FDF*_g2fMwvHGa%0g4wdK{tTd{l1BH450Bdk7 zfi16o8N&^_1}lwdfiN8k)S=8gF_;dApPPQJ!AheJCuSZW%#6&;3x%oCk)NyX#9WQG zv3_L@JN?kfKzL5!unI)>qz|0?j(lIC%sCy=U7yqn1e+VfGEJ!TqEZO&- zo?|4R!8@$e{zfU-Kg#+HmJxuuf zhkkh3^}~)8{&;uv>r)t4GASShq<|EV0#e|23V83OEmw((Qa}nwfiDI8`_Sl)UE!D* zpALo?0f-Bx!?=!Fg4jGk> Date: Thu, 25 Jun 2020 16:33:24 -0500 Subject: [PATCH 4/5] first draft --- blogs/draft.md | 152 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 blogs/draft.md diff --git a/blogs/draft.md b/blogs/draft.md new file mode 100644 index 0000000..e6237ab --- /dev/null +++ b/blogs/draft.md @@ -0,0 +1,152 @@ +# Introduction +GraphQL in short is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. +A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type. For example, a GraphQL service that tells us who the logged in user is (me) as well as that user's name might look something like this: +``` +type Query { + me: User +} + +type User { + id: ID + name: String +} +``` +Along with functions for each field on each type: +``` +function Query_me(request) { + return request.auth.user; +} + +function User_name(user) { + return user.getName(); +} +``` +Now, for many of us, as beginners, may have the same question, "How does it compare with REST"? + +As you've probably known, the REST has been popular as a industrial standard over many years. Despite of its great functionality, REST APIs have shown to be too inflexible to keep up with the rapidly changing requirements of the clients that access them. + +GraphQL was developed to cope with the need for more flexibility and efficiency! It solves many of the shortcomings and inefficiencies that developers experience when interacting with REST APIs. + +However, in the beginning of learning GraphQL, many concepts and notions may seem to be confusing and frustrating to learn. In GraphQL, with application data graph, we can represent the queries by graphs to show the relations between the data. Such a representation can help developers to construct what they tend to be in a more natural and logical way. + +# The Application Data Graph +A lot of data in modern applications can be represented using a graph of nodes and edges, with nodes representing objects and the edges representing relationships between these objects. + +For instance, say we’re building a cataloging system for libraries. To keep it simple, our catalog has a bunch of books and authors and each of these books has at least one author. The authors also have coauthors with whom the author has written at least one book. + +By GraphQL, we can even extract trees from the app data graph. To do so, we can adapt the concepts of binary tree, which a data point starts with the root of the tree, and we can present its subtree and nodes with edges. + +# How to model a graph +In GraphQL, we use a "schema" to present the business domains, which it is composed of different types with entities. Mainly, a schema can be composed with different fields, so each field is pointing to one and another. In the graph theory, they are connected by edges. + +``` +type User { + lastname: String + firstname: String + email: String + settings: UserSettings +} +``` + +Corresponding to the graph aside, the fields, lastname, firstname and email are pointing to the type String, and they are scalar, which means that they don't have any subfields and they can be seen as the leaves of a query tree. The relationships between a type and its fields are unidirectional edges and are the building block of the schema. This makes the GraphQL Schema an acyclic directed graph to which they don't have circles and they are one way around. Hence, the process or behavoir of visiting the nodes in a tree is called tree traversal + +# Traversing the Graph with GraphQL +Let’s take a look at an example of a GraphQL query and how it “extracts a tree” out of an application graph. Here’s a query we could run against the data graph we were just talking about: +``` +query { + book(isbn: "9780674430006") { + title + authors { + name + } + } +} +``` +Once the server resolves the query, it returns this query result: +``` +{ + book: { + title: “Capital in the Twenty First Century”, + authors: [ + { name: ‘Thomas Piketty’ }, + { name: ‘Arthur Goldhammer’ }, + ] + } +} +``` +As a result, a path of the tree is a GraphQL query in that graph, and a query is a projection of a certain subset of the GraphQL schema to a tree. On the backend side, every field of a type maps to a resolver function that returns its value when queried. + +``` +title:() => (database.getTitle()) +authors:() => (database.getAuthors()) +``` +We obtain the query result by running such resolver functions to extract and pull out the result from fields of the schema. + +# Schema Parsing +The GraphQl server parses the schema document at execution time. Types are extracted and stored as plain Javascript Objects with references to their fields, and to the resolver functions in a dictionary called typeMap. When a field must be resolved the execution algorithm will look for it in the dictionary and use both the resolver function and the references to its subtypes to build its value. + +``` +// Simplified structure of the type map +let typeMap = { + rootType: { + fields: { // array with the fields of the root ype + user: { + type: { + fields: { + title: {...}, + authors: {...}, + date: {...}, + } + }, + resolve: () => ({}) // points to a resolve function for the type + }, + date: { + type: { + fields: { + year: {...}, + month: {...}, + day: {...}, + } + }, + resolve: () => ({}) // points to a resolve function for the type + } + } + }, +}; +``` + +As every type contains a reference to its resolver function, one can resolve the whole schema by repeating three steps: + +1. Retrieve a type from the typeMap dictionary +2. Run its resolver function +3. Repeat the same on the fields of this type + +# Query Parsing +The GraphQL server parses every query from a string to an Abstract Syntax Tree(AST). An AST is a tree representation of the syntax of source code from a particular language. Every node in the tree represents a statement in the query, including its type, arguments, and position. + +``` +query getDates($isbn: ID) { + book(id: $isbn) { + title + dates{ + year + month + day + } + } +} +``` +The AST is a common abstraction for compilers and is used to validate syntax correctness in a process called semantic analysis. Again, because of its tree-like structure, the AST can be processed and interpreted by recursive functions. This process is behind the query validation feature that GraphQL editors usually offer. + +# Query Execution +Once a query operation has been converted to an AST and its structure validated, we can use the tree properties to execute the query. The core of the execution algorithm is a recursive function that runs on every node of the query tree following a depth-first-search order. + +// will have images inserted here + +The traversal ensures that fields are executed and resolved in a stable and consistent order. Following the first order traversal the field execution function will be called on each field in the following sequence: +[book, title, dates, year, month, day] + +The executeField function contains the magic behind the field value resolution and is well described in the GraphQL specifications. The function arguments are the name of the type is being run on, the definition of that type from the typeMap dictionary and the resolver function. First, the algorithm executes the resolver function and stores the return. Next, it completes the field value depending on its type. If the field type is a scalar, its value is simply "coerced" using a serialization function and directly returned. + +Conclusion +Graphs is what makes GraphQL fascinating to learn and use. It gives you the natural logic when we think about the relations of the data and the querys. From 7a4724a8a7810a62da9bd7b1bc539455fc945259 Mon Sep 17 00:00:00 2001 From: TonyWu1998 Date: Fri, 26 Jun 2020 17:48:28 -0500 Subject: [PATCH 5/5] first draft --- blogs/draft.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blogs/draft.md b/blogs/draft.md index e6237ab..efb006c 100644 --- a/blogs/draft.md +++ b/blogs/draft.md @@ -1,6 +1,6 @@ # Introduction GraphQL in short is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. -A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type. For example, a GraphQL service that tells us who the logged in user is (me) as well as that user's name might look something like this: +A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type. For example, a GraphQL service that tells us who the logged in user is (me) as well as that user's name might look something like this: ``` type Query { me: User