GrandStack - GraphQL, React, Apollo and Neo4j

Transcript

1. GRANDSTACK GraphQL, React, Apollo and Neo4j Build full stack graph applications with ease.
2. If you’re like me, you probably go through three stages when hearing about a new technology: 1. Dismissal One more JavaScript library?! Just use jQuery already! 2. Interest Hmm, maybe I should check out this new library I keep hearing about… 3. Panic Help! I need to learn this new library right now or I’ll be completely obsolete! What do I do?
3. GRAPHQL
4. Query language for API, a syntax that describes how ask for data. The “graph” part comes from the idea of crawling across your API graph by using fields and subfields; while “QL” stands for “query language”. Let client specify exactly what data it needs. It makes it easier to aggregate data from multiple sources. It uses a type system to describe data. What is it?
5. The Problem GraphQL got its start at big old Facebook, but even much simpler apps can often bump into the limitations of traditional REST APIs. Imagine a list of posts and under each post a list of likes, including names and avatars. Easy enough! But now, it’s time to work on your mobile app, and it turns out loading all that extra data is slowing things down. So you now need two endpoints, one with the likes and one without them. Now add one more factor to the mix: it turns out that while posts are stored in a MySQL database, likes on the other hand live in a Redis store! What do you do now?!
6. The solution Facebook came up with is conceptually very simple: instead of having multiple “dumb” endpoints, have a single “smart” endpoint that can take in complex queries, and then massage the data output into whatever shape the client requires. The solution
7. Type Defs type User { id: ID! name: String friends: [User] @relation(name: "FRIENDS", direction: "BOTH") reviews: [Review] @relation(name: "WROTE", direction: "OUT") numReviews: Int @cypher(statement: "MATCH (this)-[:WROTE]->(r:Review) RETURN COUNT(r)") } type Query { Users(ID: ID, name: String, first: Int = 10, offset: Int = 0, orderBy: _UserOrdering): [User] UsersByName(substring: String): [User] @cypher( statement: "MATCH (u:User) WHERE u.name CONTAINS $substring RETURN u" ) } type Mutation { CreateUser ( name: String! email: String! password: String! role: String = "SUBSCRIBER" ): User }
8. Queries type Query { Users(ID: ID, name: String, first: Int = 10, offset: Int = 0, orderBy: _UserOrdering): [User] UsersByName(substring: String): [User] @cypher( statement: "MATCH (u:User) WHERE u.name CONTAINS $substring RETURN u" ) }
9. Mutation type Mutation { CreateUser ( name: String! email: String! password: String! role: String = "SUBSCRIBER" ): User }
10. Resolvers let links = [{ id: 'link-0', url: 'www.howtographql.com' , description: 'Fullstack tutorial for GraphQL' }] // 1 let idCount = links.length const resolvers = { Query: { info: () => `This is the API of a Hackernews Clone` , feed: () => links, //Can use some repository to get information from DB }, Mutation: { // 2 post: (parent, args) => { const link = { id: `link-${idCount++}`, description: args.description, url: args.url, } links.push(link) return link } }, }
11. React
12. ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. It’s used for handling view layer for web and mobile apps. React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. React allows developers to create large web applications which can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in application. This corresponds to view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, Everyone knows
13. Apollo
14. Introduction Apollo is a complete platform for implementing a graph over your data. It includes two runtime libraries, Apollo Server and Apollo Client, for building and querying your graph's API. It also features developer tooling that integrates with your existing workflow and gives you full visibility into the performance and security of your graph. Why do you need a graph? Today, one of the most difficult parts of building an app is figuring out your data layer. Often, there's many data sources you need to fetch from and many clients you need to support. When you layer a graph in between your services and your UI, you can remove a lot of complexity from your data fetching logic and ship features faster.
16. Backend Frontend
17. Neo4j
18. READ https://cheesecakelabs.com/blog/starting-gra ph-databases-quick-look-neo4j/ Very simply, a graph database is a database designed to treat the relationships between data as equally important to the data itself. It is intended to hold data without constricting it to a pre-defined model. Instead, the data is stored like we first draw it out – showing how each individual entity connects with or is related to others. Graph database
19. GraphQL might seem complex at first because it’s a technology that reaches across many areas of modern development. But if you take the time to understand the underlying concepts, I think you’ll find out that a lot of it just makes sense. So whether you end up actually using it or not, I believe it’s worth taking the time to familiarize yourself with GraphQL. Conclusion