More GraphQL - Fun Fun Function

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ก.ย. 2024
  • 💖 Survey: Please tell me your opinion on this episode
    funfunfunction...
    💖 Support the show by becoming a Patreon
    / funfunfunction
    We're continuing our GraphQL journey, looking at lazy fetching and API aggregation.
    🔗 Episode: Continuous Integration - What's the point?
    goo.gl/o59jdR
    🔗 Discussion topic for this episode on Fun Fun Forum
    www.funfunforu...
    🔗 Code from episode
    github.com/mpj...
    🔗 Why become a patron?
    / funfunfunction
    🔗 mpj on Twitter
    / mpjme
    🔗 Help translate the show to your language
    www.youtube.com...

ความคิดเห็น • 85

  • @theophile_
    @theophile_ 7 ปีที่แล้ว +4

    Super format! You really have found a good pace for the video. The length is also very covenient! BTW, I love the way you have edited this video, it helps to keep the long boring parts under the hood and focus on explaining.

  • @ConnorElsea
    @ConnorElsea 7 ปีที่แล้ว +4

    Awesome video. Crazy that the resolver promise could basically be anything. Read from file, link into other APIs, or even set up some sort of caching system where it is memoized

  • @Codacho
    @Codacho 6 ปีที่แล้ว +1

    this was a nice trip down memory lane, before the studio.. oh... the good ol days

  • @JamesIsbellUK
    @JamesIsbellUK 7 ปีที่แล้ว +21

    Could you look at authentication, authorisation and validation in graphql please :)

    • @nikolasburk
      @nikolasburk 7 ปีที่แล้ว +2

      Hmm not sure I agree Kevin Velasco! At Graphcool, we solved Authorization with GraphQL using a new concept which we call "permission queries" (www.graph.cool/blog/2017-04-25-graphql-permission-queries-oolooch8oh). These let you specify your permission rules in a declarative way - using the familiar syntax of GraphQL queries.

    • @JamesIsbellUK
      @JamesIsbellUK 7 ปีที่แล้ว

      Cheers for the comment @Kevin Velasco. Don't you mean authentication here though?
      REPLY

    • @JamesIsbellUK
      @JamesIsbellUK 7 ปีที่แล้ว

      @Nikolas Burk, interesting concept! I like the idea, not sure if i get it fully yet but hopefully it'll lead me on the right track. Cheers!

    • @JamesIsbellUK
      @JamesIsbellUK 7 ปีที่แล้ว

      This is interesting: github.com/thebigredgeek/apollo-resolvers.

  • @vikai_fang
    @vikai_fang 7 ปีที่แล้ว

    Hey mpj, very nice video!! Since I found you here, Monday mornings are just about fun and exciting learning, and not painful and boring (at job) anymore :)
    Thank you very much for your efforts!
    To your list of topics to talk in your episodes, you could add the "Service workers - why and how" :)

  • @user-ur1vm5hw1x
    @user-ur1vm5hw1x 6 ปีที่แล้ว

    Great series! If you want a "cleaner" parsing from XML you could add {trim: true, ignoreAttrs : true} as a second parameter to parseXML, then the underline at 7:15 won't be neccecary :)

  • @sebastianwei542
    @sebastianwei542 7 ปีที่แล้ว

    Thanks for your show! Need to find time to go throw in detail

  • @davey_edwards
    @davey_edwards 7 ปีที่แล้ว

    that was awesome hooking in with Google Cloud text api, way easier then I thought

  • @user-lm7es8mr7s
    @user-lm7es8mr7s 7 ปีที่แล้ว +2

    @mpj do more videos of GraphQL! A series perhaps?

  • @aleksandrkazakov3104
    @aleksandrkazakov3104 7 ปีที่แล้ว +3

    Hi mpj! You should look at graphql-tools module.

    • @greyapplebr
      @greyapplebr 7 ปีที่แล้ว

      Yeah, it's easer. The link www.howtographql.com/graphql-js/1-getting-started/ teaches how to use it

  • @murilolobato
    @murilolobato 6 ปีที่แล้ว

    this intro is gorgeous

  • @abadacadaba
    @abadacadaba 7 ปีที่แล้ว +1

    Hi mpj, awesome video! A suggestion: you can use nodemon for re-execute your node app whenever you make a change in the codebase.

    • @wixnarara
      @wixnarara 6 ปีที่แล้ว

      He knows, just didnt bother

  • @InfinityCounter
    @InfinityCounter 7 ปีที่แล้ว

    This was a really good episode.

  • @soullesswaffle
    @soullesswaffle 7 ปีที่แล้ว

    Great video! Do you know if there's a way to avoid the extra call to the book endpoint if the query only requests the book IDs?

  • @Schlumpfpirat
    @Schlumpfpirat 7 ปีที่แล้ว

    What about basic authentication / OAuth against endpoints? Especially given multiple endpoints require various different authentications

  • @d1337
    @d1337 5 ปีที่แล้ว

    On the error handling the "path" member seemed to point to your "resolver" mapping in the GraphQLType for the book's title.

  • @JamesGaehring
    @JamesGaehring 7 ปีที่แล้ว

    Regarding error swallowing, express-graphql does allow you to pass an errorFormat option when you instantiate it, but it looks like that just reformats the message in GraphiQL, rather than logging something to the console, which would seem more ideal.
    github.com/graphql/express-graphql#debugging-tips

  • @rogerbosman2126
    @rogerbosman2126 6 ปีที่แล้ว

    So what about when just loading book id's? Now we fetch the entire book to just show the id, but we have that information already (so unnecessary gets are performed)

  • @TO-cw9fy
    @TO-cw9fy 6 ปีที่แล้ว

    Hey MPJ, are you a fellow DayKnight? Saw the Day[9] pop up on your youtube recommended stuff videos, warms my heart to see another developer/knight : )

  • @locodev770
    @locodev770 7 ปีที่แล้ว

    Hey, what do you think about real time databases like firebase or rethink? and could you give me some advice about how to manage "on" and "off" listeners? eg. having a queue with all listeners and turn off all if user logout...

  • @rodrigososa5281
    @rodrigososa5281 7 ปีที่แล้ว

    The only thing I can't still understanding is how am I able to send data over graphql...

  • @kjsam
    @kjsam 6 ปีที่แล้ว

    Hi, may I know what the song name is starting at 14:30? It's been stuck on my mind for a few days now!

  • @slim_mike
    @slim_mike 5 ปีที่แล้ว

    pleeease! pleease! do an episode about authentication using graphql!

  • @brianmanden
    @brianmanden 7 ปีที่แล้ว +2

    Just a tip:
    Instead of restarting server you can use Nodemon :)
    More here: nodemon.io/

  • @nLamprok
    @nLamprok 7 ปีที่แล้ว +2

    Amazing style, especially for developers. Keep it up mpj! (a fellow patreon)

  • @Misantronic
    @Misantronic 6 ปีที่แล้ว

    great video!
    i actually hoped that you try german as translation. i'm glad my telekinesis worked!

  • @DavitBarbakadze
    @DavitBarbakadze 6 ปีที่แล้ว

    You need to write GraphQL middle-point for Google Translate :)

  • @testuser429
    @testuser429 7 ปีที่แล้ว +4

    The more I look on GraphQL, the more it looks like OData. Can someone explain the difference between those two?

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว +2

      They largely have the same goals. I had literally never heard of Odata, it seems to be an older, Microsoft-driven standard that haven't taken off that much outside of heavy enterprises - the names they cite are SAP, Salesforce etc. GraphQL also seems to be a simpler product, while OData is quite elaborate, with versioning, aggregation, filtering and ordering capabilities.

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว +3

      I found this pretty helpful: www.progress.com/blogs/rest-api-industry-debate-odata-vs-graphql-vs-ords

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว +4

      One thing the article doesn't mention is that GraphQL is transfer-agnostic. I.e. while it can, and often is, transferred over HTTP, it can be used over any transfer mechanism, sockets etc.

    • @testuser429
      @testuser429 7 ปีที่แล้ว

      Thank you very much for your answer.

    • @nikolasburk
      @nikolasburk 7 ปีที่แล้ว

      Here is an awesome talk from GraphQL Europe that gives some historic context around GraphQL and compares it to other API technologies (like OData or Falcor): th-cam.com/video/coU6OmISOBM/w-d-xo.html Might have some helpful insights for you :)

  • @sebastianwei542
    @sebastianwei542 7 ปีที่แล้ว

    How to implement it on my Webapp? What do you think about apollodata.com for graphql?

  • @MattSidor
    @MattSidor 6 ปีที่แล้ว

    Since the original API request for author (goodreads.com/author/show.xml) already includes the author's books in the XML response, what is the advantage to creating separate API requests for just the books? Won't this just make it slower, since now we have to wait for the additional, redundant API calls to each book?

    • @funfunfunction
      @funfunfunction  6 ปีที่แล้ว +2

      As I say in the video, you need a bit of imagination and envision a situation where that data did not exist.

    • @MattSidor
      @MattSidor 6 ปีที่แล้ว

      Thanks! Sorry I missed that.

  • @JamieHicks154
    @JamieHicks154 7 ปีที่แล้ว

    Any plans to do React and GraphQL?

  • @lukaszelenka9777
    @lukaszelenka9777 6 ปีที่แล้ว

    what is the song starting at 5:10?

  • @muxahuk1214
    @muxahuk1214 7 ปีที่แล้ว

    The only thing that is not clear - how do i make this calls from front-end (real app) for ex. react application..

    • @mnlttt
      @mnlttt 7 ปีที่แล้ว +1

      Михаил Семёнов you need a client for that, for instance an implementation that works in Angular would be a client called Apollo

    • @nikolasburk
      @nikolasburk 7 ปีที่แล้ว +1

      You don't _necessarily_ need to use a GraphQL client (like Relay or Apollo), but potentially also simply access your GraphQL API using plain HTTP (e.g. using curl in the terminal or Javascript's fetch). However, when building a real app you most likely want to use a GraphQL client since it makes life so much easier for you! If you want to learn more about GraphQL clients, check out the corresponding How to GraphQL article: www.howtographql.com/advanced/0-clients/ And for a practical introduction, there are a bunch of frontend tutorials on the site a s well that teach you how to get started with Apollo and Relay :)

  • @ArturoBlancoGarcia
    @ArturoBlancoGarcia 7 ปีที่แล้ว

    Does anyone knows the name of the screen recording software that MPJ uses?. I only recognize VSCode, Tower2 git client, Mouseposé, QuickTime, SketchApp...

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว +1

      See the behind the scenes episode

    • @ArturoBlancoGarcia
      @ArturoBlancoGarcia 7 ปีที่แล้ว

      Yes, thank you MPJ!!!!, I saw it a couple hours after this video, and I got my answer there (I'm still catching up with your old content); it would be convenient that you update that video description with the specs of your new mic and the new EOS 80D camera (I think thats the model) that your are currently using. I love your shows!. I'm a rookie dev, I started programing this year, and I've already published my two first ionic apps (apple.co/2yCZwXe ) and your shows has been of huge help for me. Would you mind if I make an spanish version of some of them ...????? Cheers Matt.

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว

      Hi Arturo! My setup has changed slightly from the behind the scenes episode, but not in any meaningful way.

  • @deshiknaves
    @deshiknaves 7 ปีที่แล้ว

    What’s the vscode plugin that you’re using that shows the gizipped size of a module?

    • @dpointeck
      @dpointeck 7 ปีที่แล้ว

      Import Cost is the plugin you're looking for

    • @deshiknaves
      @deshiknaves 7 ปีที่แล้ว

      Daniel Pointecker awesome. Thanks 🙂

    • @34tttttaa
      @34tttttaa 6 ปีที่แล้ว

      Careful with that one! It's quite cool but was eating all my CPU & killing battery life. :o

  • @stef2go
    @stef2go 7 ปีที่แล้ว

    I love you! What is the Song at Minute 5 and what at Minute 15?

    • @Silentfrost86
      @Silentfrost86 7 ปีที่แล้ว

      Bouncy by Swag House Mafia @ 15

  • @Techonsapevole
    @Techonsapevole 7 ปีที่แล้ว

    Apollo GraphQL now :D

  • @rohovdmytro
    @rohovdmytro 7 ปีที่แล้ว

    Cool :)

  • @Siddharthpandey27
    @Siddharthpandey27 7 ปีที่แล้ว

    Can you take session on call bind and apply

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว

      I've done one on bind, and honestly call and apply are ultra trivial to understand if you understand bind.

    • @Siddharthpandey27
      @Siddharthpandey27 7 ปีที่แล้ว

      I have checked your bind episode. I was talking about the magics when you combine all 3 of them

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว

      I'm not sure what you mean, to be honest.

    • @Siddharthpandey27
      @Siddharthpandey27 7 ปีที่แล้ว

      Cool no prob

    • @PhillipSenn
      @PhillipSenn 7 ปีที่แล้ว

      You don't have to teach something that you are trying to learn yourself. You can teach things that are "ultra trivial".

  • @lols1503
    @lols1503 7 ปีที่แล้ว

    I'm wondering why you need GraphQL at all ? You couldn't do the same just with vanilla ? Without all those wrapping classes? Maybe I'm missing something, but I didn't understand the "big deal" behind all of this

    • @the_crius
      @the_crius 7 ปีที่แล้ว

      I'm not sure what you're referring to with "vanilla". If you're talking about REST APIs the main difference is that a REST endpoint will always return a fixed response even if you need just a tiny bit of that information while a GraphQL can be "queried" specifying what exactly you need.
      For a very basic example think about mobile. Mobile traffic is constantly raising compared to the non-mobile and having lean response from a service is going to greatly improve the performance perception of the user experience.
      Or again, think about services that performs a huge amount of operations in bulks. Having smaller responses will speed things up considerably with big enough numbers.
      TH-cam API (while I don't think implements graphQL) allow you to specify which fields you require from an endpoint response for example and with the scripts I'm working on that works on several thousands of channels at once, it's quite an improvement compared to getting the whole result object.

  • @PhillipSenn
    @PhillipSenn 7 ปีที่แล้ว

    There are more beginning users than there are advanced users. More people need to know the fundamentals than advanced libraries.

    • @the_crius
      @the_crius 7 ปีที่แล้ว

      There are tons of videos in this channel that even if a little old are still relevant to the basics. Try to check them out.

  • @jasoncroos3429
    @jasoncroos3429 7 ปีที่แล้ว +10

    pls do node,express,react js

    • @saarlevy9891
      @saarlevy9891 7 ปีที่แล้ว +3

      What does that mean? Do you want him to invent those libraries?

    • @funfunfunction
      @funfunfunction  7 ปีที่แล้ว +3

      What exactly is it that you are missing in the material that is already out there? It seems to me that all those subject are covered super well.

    • @shaneunger
      @shaneunger 7 ปีที่แล้ว

      Personally I'd like to hear your thoughts on some of the choices React has made, specifically in its championing of es6 classes. One of the engineers from Netflix said their move to the class syntax was premature, and caused some headaches (medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3). I've heard similar things, especially that es6 classes are Satan's doorway into our souls. I'd love to hear your thoughts. Thanks!

  • @BeheadedKamikaze
    @BeheadedKamikaze 7 ปีที่แล้ว +4

    For the love of all that is good, please(!) add encodeURIComponent around the lang parameter in translate(), otherwise you are just inviting people to do parameter injection attacks on your API!

    • @BeheadedKamikaze
      @BeheadedKamikaze 7 ปีที่แล้ว

      Yes that is the time and you are correct, str is encoded. But lang is not, and lang is another parameter that comes from the user's query and so must not be trusted.

    • @BeheadedKamikaze
      @BeheadedKamikaze 7 ปีที่แล้ว +1

      comet3bc13 No, not really "no problem".. for example you could set the lang param to something like "&transferAmount=1000000&toAccount=12345678" and then that would send those parameters to the other API and it would trust them as if your program had issued them (it can't tell the difference). This is why you must always encode user input. Granted, in this example there's not really much you can do with the Translate API but in general it could be quite dangerous.

    • @BeheadedKamikaze
      @BeheadedKamikaze 7 ปีที่แล้ว +3

      comet3bc13 No it won't do anything for XSS. But it will allow an attacker to potentially modify your application's request to another API by injecting parameters into the request. Because the URL for the API is just a string, if you were to pass such a value to lang then you could cause the query endpoint to issue commands to other APIs such as
      hxxps://www.googleapis.com/language/translate/v2?key=whatever&source=en&target=pr&transfer=1000&toAccount=12345678&q=hello
      ... instead of properly encoding it as...
      hxxps://www.googleapis.com/language/translate/v2?key=whatever&source=en&target=pr%26transfer%3D1000%26toAccount%3D12345678&q=hello
      With the proper encoding the other API will just say "invalid format for parameter target" instead of treating them as real parameters and doing something you didn't expect to do.
      Remember that decoding is done AFTER splitting the query string on &, so you need to make sure those characters are encoded in order to keep them contained within the parameter that you intended.

  • @slim_mike
    @slim_mike 5 ปีที่แล้ว

    wut? you are a swede? that was unspected!

  • @zdddddd
    @zdddddd 7 ปีที่แล้ว +5

    please record minecraft videos. I love minecraft!