Deep dive on Relay GraphQL client for React

hey folks this is says from Asura I wouldn't tell you about adding really support to the surah first I'm gonna tell you about relay and then I'm gonna tell you how to use relay in the surah together so you know that feeling when you're working really hard on a project and then you finish coding and you run your code and you find there's no bugs everything's running perfectly you've written perfect code of course I'm just kidding this never happens to anybody for this to happen to you you would have to be a unicorn and everybody knows that unicorns don't exist they're mythological creatures if you think your unicorn you do you boo narwhals on the other hand do exist you know they look totally made-up they're out there and just like everything that's real they're imperfect so let's just say we're all narwhals we all make mistakes so what does all of this have to do with real a answer well relay is a JavaScript framework for declaratively fetching and managing craftwell data and relay knows that we all make mistakes and actually sets us up for success with strict conventions mm-hmm what are the ways that relay saves us from failing one is minimizing developer errors and the other is maximizing performance and for both of these things relay uses the relay compiler which is the star of the show and it's really quite magical actually it's a composer of sorts it composes graph QL fragments and what does this mean well just like components are composed into a tree in react relay was also made by Facebook so it's a similar mental model and in relay data fragments are composed into a query this is so that we can reduce run trips to the server because the compiler can maximize our efficiency so if you don't know what a fragment is I can tell you right now you a selection of fields' on a graph QL type and it looks like this it here is a album fragment on type album and we're selecting the fields named genre and the names of the tracks this allows us to split a query into reusable fragments in relay this is how you would do that this is an album detail component and it's showing its fragment and it's showing its view and they're both inside the same components this is called collocation this means that data definitions and view definitions live together so we have the data fragment and the view inside the same component collocation has a bunch of benefits first of all we're declaring exactly what data we need which is makes it hard to over fetch or under fetch data not over fetching improves performance because you're not getting more than you need and not under fetching prevents errors from missing data also components can only access data that they've asked for this is called data masking and this prevents implicit data dependency bugs because components can't rely on other components for their data also components only rerender when the exact data they're using is updated this prevents unnecessary re-renders so all in all collocation makes our code more modular easier to refactor more performant and less error-prone so really compiler does a bunch of other cool things one of these is automatic type generation by default there flow types but if you wanted you could also go with typescript and with the flow types if you want to see what that looks like here is an example i'm importing the type which is auto generated by the relay compiler and I'm checking my against this type which I'm passing into my component types are great because type safety parents bugs so I recommend it real a compiler goes further it actually transforms your queries into shorter strings it optimizes them by removing redundancies and flattening them this reduces the query payload size because now we have shorter strings and this is great for performance speaking of shorter strings you can also enable persisted queries when you run the relay compiler you can use the persist output flag and when this is enabled your graph QL operations will be converted into md5 hashes so md5 hashes make our strings shorter this reduces query payload size even more what and not only that but you can now whitelist queries because now these md5 hashes can define queries that your clients are restricted to use so this improves security so this is the whirlwind tour of relays benefits on the client-side what about the server side this is where asura comes in relay has a server spec that is very specific so if you're not using a surah you have to implement it manually and the first thing is the node interface this means that the server must implement an interface named node and it must have field named ID and this ID must be globally unique this is so that relay can refetch the data using this ID because the server must also implement a root level field called node which takes in the ID and gives you a type that implements the node interface so this is great for performance on the client side but on the server side it's actually kind of a pain to implement because you have to make sure that the IDS are globally unique you have to make sure you can get the objects with the IDS so if you use a surah you don't have to implement this back end because asura Auto generates this back-end for you which I'm going to show you in a second in my demo the other thing with the server spec is connections connections are relays way of standardizing pagination so in relay you might have a query like this where you're getting the album's of an artist you get the first two and there's a bunch of pagination info in there like the cursors and whether there's a next page but relay actually keeps track of the cursors and merging the results and loading States and everything so you don't actually have to keep track of that on the client side but on the server side you still have to implement this so dun dun dun with a surah you don't have to implement this on the server side because a server auto generates this back-end for you again so let me show you now how to use a surah and relay together here's my graph fuel endpoint that I would normally use with if I'm using like a pal client or something and here is my schema that is auto generated by the surah from my database which has restaurants and reviews it has a one-to-many relationship so one restaurant has many reviews and normally you would go like restaurant name reviews body you can get the list of restaurants and a bunch of reviews now if you look up here what is this mm-hmm there is a toggle here you can enable the relay API and now the endpoint has changed so if you're using a relay you would use this end point and down here we have the real a compliant schema so we have the node root field and we have the connections on restaurants interviews so we can paginate them inside the connection there's information about the pagination like I want the first ten restaurants or something and page info so if I were manually paginating I would get this end cursor and then I would say after that cursor to get the next page but as we said before relay keeps track of the cursor for you so you don't actually have to do that and then let me show you an example here so edges node this is the field on the restaurant and you can get the reviews like we did before or you can get the reviews connection if you want to paginate them edges node body of the reviews so let's run this and see what happens we get our restaurants and we get the reviews on the restaurants in the format that we can imagine eight and if you also notice there's an analyze button here Asura is actually converting our graph to our query into a efficient sequel query so our query is even further optimized by Asura here cool so lets me show you my app that i made just for demo purposes so here's a restaurant and here are the list of reviews here is the load mora button gets me three more reviews and i can keep clicking until there's no more reviews and the button disappears and the code for this looks like this and i'm not gonna go into too much detail but i am gonna show you fragments and I'm gonna show you pagination so here we go this is my root query where I'm getting the restaurant lights ID it's got the name in the cuisine and I'm also including the fragment here for my reviews this object here is the fragment reference that this fragment can get its data from so this restaurant fragment reference it's called the fragment reference by relay so down here in the reviews component I'm passing my fragment reference so it knows where to get a stated from and then in the reviews component I'm calling because I want to paginate my reviews I'm going use pagination fragments which comes from relay and it returns a bunch of functions that are super convenient like load next for when you click the load more button has next a boolean for hiding the button if there's no more reviews is loading next another boolean for showing a loading text on the button and then here's my fragment it's taking a bunch of arguments because you can pass arguments into fragments in relay so it's taking cursor and first then we have the researchable directive this is so that you don't have to run the restaurant query this auto generates a smaller query for you for when you just want to get the pagination data and then finally here is my actual connection with the fields on it and Here I am rendering my list and here is my button as next if there's no more reviews I hide the button on click I load the next three reviews it's disabled if we're loading and it's showing loading text so there we go there is my little demo of relay in the surah if you want to try it out and if you have any questions or feedback you can just go to our home page for the IO and find our links to discord and Twitter and let us know what you think we'd love to hear from you thank you very much

Channel: Hasura

Views: 7,055

Keywords:

Id: xnvzz7Z658I

Length: 13min 30sec (810 seconds)

Published: Mon Jul 13 2020