GraphQL Pagination with Cursors in Apollo React

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 พ.ย. 2024

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

  • @elvistejeda8661
    @elvistejeda8661 2 ปีที่แล้ว

    Thank you! It helped me make sense of this GraphQL API I'm working with.

  • @anthonypena1691
    @anthonypena1691 2 ปีที่แล้ว

    Ws working with flutter_graphql and these concepts translated well! Thank you so much for your help!

  • @PeterJaffray
    @PeterJaffray 2 ปีที่แล้ว

    You video helped me a lot. Thank you Leigh.

  • @tylereikenberg9651
    @tylereikenberg9651 3 ปีที่แล้ว

    Thanks for this video! This helped me solve something at work thats been bugging me for a week.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Nice! Glad you figured out the issue!!

  • @funnycommentary7167
    @funnycommentary7167 2 ปีที่แล้ว

    Thank you for your clear and concise explanation, I really appreciate it!

  • @yigitruzgaruzun7289
    @yigitruzgaruzun7289 3 ปีที่แล้ว

    Your lessons are very valuable. We thank you.

  • @christianquispecamasca3491
    @christianquispecamasca3491 4 ปีที่แล้ว

    Gracias, Leigh Halliday, eres el mejor!!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Haha thanks, Christian! No, tu eres lo mejor!

    • @christianquispecamasca3491
      @christianquispecamasca3491 4 ปีที่แล้ว

      @@leighhalliday Estoy muy agradecido contigo Leigh, me han ayudado bastante tus videos :D, aunque no entienda el inglés, tus videos son bastante entendibles, reitero, eres el mejor!

  • @samahgad241
    @samahgad241 ปีที่แล้ว

    Tanks alot very clear and helpful❤

  • @chris_and_music
    @chris_and_music 2 ปีที่แล้ว

    Thank you veeeeeery much Sir! it worked for me.

  • @toddribnek6660
    @toddribnek6660 4 ปีที่แล้ว

    Awesome video 👍 you could even add a filter on the query to sort the repos alphabetically with a separate sort button.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Thanks Digital TB! For sure! I just didn't want to complicate things by combining different concepts :)

    • @toddribnek6660
      @toddribnek6660 4 ปีที่แล้ว

      Right, just getting into graphql takes a little learning.

  • @josetandavala5805
    @josetandavala5805 3 ปีที่แล้ว +1

    it has helped me, thanks for sharing.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      You're welcome José, glad it was able to help! Apollo has changed their pagination approach since this video came out I believe, so just make sure to check with the docs for the latest content.

  • @anandhisenthil5903
    @anandhisenthil5903 2 ปีที่แล้ว

    Really good

  • @rakeshpk4991
    @rakeshpk4991 3 ปีที่แล้ว

    This is really helpful. Thank you very much!

  • @АлександраТарасова-ю6т
    @АлександраТарасова-ю6т 3 ปีที่แล้ว

    Brilliant

  • @tomasschaffer2190
    @tomasschaffer2190 3 ปีที่แล้ว

    Thanks a lot You saved my time.

  • @apurvsingh5541
    @apurvsingh5541 4 ปีที่แล้ว

    Thank you so much, Leigh.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Thanks apurv, glad you enjoyed the video!

    • @apurvsingh5541
      @apurvsingh5541 4 ปีที่แล้ว

      Why don’t you make more videos on such unexplored topics and be a mentor on Udemy?

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      I may try to do a course some day... Not sure on what topic yet though :)

  • @paulmendes3480
    @paulmendes3480 2 ปีที่แล้ว

    Thank you

  • @gamedeck154
    @gamedeck154 4 ปีที่แล้ว

    You're a life saver. Thanks a lot for this.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Glad it helped, Farouq! Thanks for saying hi :)

  • @punichennai
    @punichennai 4 ปีที่แล้ว

    Great one. really life saver

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Woohoo! Glad the video helped :)

  • @tshaylatte9502
    @tshaylatte9502 4 ปีที่แล้ว

    Well thank you! You saved me some valuable time !

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Excellent! You're welcome :)

  • @AliYasir5247
    @AliYasir5247 4 ปีที่แล้ว

    ur the best. keep doing this kinda videos. 😊

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Thanks, Ali!! I appreciate it :)

  • @mattmazzola
    @mattmazzola 4 ปีที่แล้ว

    Great video!
    Does Apollo have other methods to facilitate adding individual data to this set? Similar to how `fetchMore` covers the common case of loading more data and adds this data to the existing list so you don't have to write a wrapper to manage this state around it. Is there other method to cover the case of creating new object? Imagine you had a form that allowed you to create repos. You would also want this newly created repo to show up in that list if the request was successful.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Hey Matt! Thank you :)
      I think there are 2 opportunities for updating cache... first is after a mutation, and Apollo provides some examples for that here: www.apollographql.com/docs/react/data/mutations/#updating-the-cache-after-a-mutation but you could also update the cache outside of a mutation sort of whenever you want via the apollo client's cache: www.apollographql.com/docs/react/caching/cache-interaction/

  • @KMRakibulIslam
    @KMRakibulIslam 4 ปีที่แล้ว

    Awesome as always, Leigh :-)
    What are some recommended resources to ramp up quickly on graphql && apollo && react?
    Obviously watching all of your videos first since it feels so natural to see you writing code as you speak and it makes it so easy to grab the concepts :-)
    Looking forward to your next video :-)

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +3

      Thanks Rakib, you're awesome too! I think after a couple tutorials the only thing that helps is just to jump in and try building something. The only reason I can make a video like this is because it isn't my first time trying out these concepts... Just have to dive in, suffer a bit, but it's the only way.

  • @behindthescenex
    @behindthescenex 4 ปีที่แล้ว

    Hi leigh, i have a question. I'd i build the graphql server using apollo and also using knex like your n+1 video, is it possible to implement cursor based pagination on the server side or is does it only allowed to use this method on the client ? Thank you so much ;))

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Hey! You can definitely do cursor based pagination server side as well... basically the cursor can be as simple as a Base64 encoded ID... so you Base64 decode it, and then say `select * from table where id > ${id} limit 10`... and that's basically it in simple terms.

  • @christianotu1981
    @christianotu1981 3 ปีที่แล้ว

    Hello Leigh. Really appreciate your work! I noticed that updateQuery function would soon be depreciated. Apollo 3 uses merge functions to update cache. Could you make a similar video, but using maybe custom merge functions?

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Hey Christian! Yea, I noticed that recently too... it's something I'd like to cover but I have to learn it myself first :D

    • @christianotu1981
      @christianotu1981 3 ปีที่แล้ว

      @@leighhalliday Alright. Thanks.

  • @effrenanthonypenasanchez7132
    @effrenanthonypenasanchez7132 3 ปีที่แล้ว

    Is it possible to change the length of the next data? For example get 10 first and then get the rest? Great Video!!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Yup! I think you'd have to pass that up as a field to your GraphQL query.

  • @niharrupareliya3302
    @niharrupareliya3302 3 ปีที่แล้ว

    You are so awesome!

  • @ihortsarenko3119
    @ihortsarenko3119 3 ปีที่แล้ว

    thank you man, you saved my ass :)

  • @Ibassemtarek
    @Ibassemtarek 2 ปีที่แล้ว

    GG

  • @Ahmadavocado
    @Ahmadavocado 2 ปีที่แล้ว

    Im using TS and I keep getting "No overload matches this call." on the updateQuery function. How do I go about this? My only fix is // @ts-ignore` but I want something more elegant

  • @bp8730
    @bp8730 4 ปีที่แล้ว

    @10:55 - you haven't mutated edges, you've created a new array in memory and pointed the repositories.edges variable at it. I believe that is a safe, immutable operation. What does immer introduce that isn't covered here? I've not used it.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Immer just makes immutability easier by allowing you as the developer to just mutate the data, and it'll make those necessary changes but immutably. Here's a full video on Immer if interested: th-cam.com/video/BcvezP2Av_4/w-d-xo.html

  • @johnfrades
    @johnfrades 4 ปีที่แล้ว

    Do you have a tutorial for server implementation? On how this cursor based implemented

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Hey John! Sorry, I don't. The truth is that most of the backend work I've done with GraphQL has been in Ruby on Rails.

  • @rumanHuq
    @rumanHuq 3 ปีที่แล้ว

    Is there anyway to do it in next.js `getServerSideProps` or in `getStaticProps` ? I cannot seem to find resource on this

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Hey Ruman! Def possible... you'd have to pass the "cursor" as a query param to the new page, and then use that in getServerSideProps when making your SSR query.

  • @AliYasir5247
    @AliYasir5247 4 ปีที่แล้ว

    how about optmistic rendering next.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      I don't know anything about this :D Something to learn!! I'll write it down on my list.

  • @Артём-е7ъ7ш
    @Артём-е7ъ7ш ปีที่แล้ว

    ok, how to create a pagination like ◀ 1 2 3 4 5 ▶ ?

  • @prabhjyotsingh8908
    @prabhjyotsingh8908 3 ปีที่แล้ว

    this is not working, updateQuery method has been deprecated in the latest version of Apollo

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Shoot! Better to refer to the documentation then.

  • @Ibassemtarek
    @Ibassemtarek 2 ปีที่แล้ว

    GG