loading...

Getting the API to return something, anything! AC Slayers Part 2

rembrandtreyes profile image Rembrandt Reyes (He/Him) ・2 min read

Data Fetching

Cool, we are up and running, now what? I will try and pull data from the Riot API.

Looking through the Next.js docs I see they have a section for data fetching. They offer three unique functions that you can use to fetch data for pre-rendering.

  • getStaticProps (Static Generation): Fetch data at build time
  • getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data
  • getServerSideProps (Server-side Rendering): Fetch data on each request.

Refer to the link above to find out more about the different data fetching methods.

While these are great, after reading when I would need to use them none of them seem to fit my use case, for now.

My home page will have a user input their summoner name and it will route them to a new page with their summoner info. For now, I am just trying to hit the GET request from Riot to see if I can return my Summoner Name.

I created a simple fetch using JS Fetch API and guess what I get hit with. A CORS issue! Not sure what CORS is? Here is a little info on it.

Ahh, so I need to figure out a way to create a proxy to fix this issue. Luckily Next.js has a nice little example that I basically copy/pasta'd into my project; I just changed the proxy target, query string, and installed some node packages.

Sweet! I returned my Summoner Name!
Alt Text

So most of the code looks like normal stuff but there was something new that I just encountered. A hook called useSWR was implemented in the example.

WTH/F is SWR!?

This deserves its own blog post but I will put some info here for now. SWR is a react hook for client-side data fetching built by the devs at Vercel. From Vercel: "The name 'SWR' is derived from stale-while-revalidate, an HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally, come with the up-to-date data."

Alt Text

Offical SWR Page
SWR features

Now we know what useSWR is and what it does!

Recap:

  • Created a very rough home page
  • Fetched data from Riot's API
    • Returned my summoner name
  • Created a proxy server for development so I can fetch data from Riot's API

Next Steps

  • Create a rough layout of User Info Page
  • Pass the user summoner name input from HomePage to UserInfoPage
  • Fetch more data that:
    • Return user info (name, level)
    • Return match history
    • Return Rank
    • Return W/L ratio
    • Return Trati Stats
    • Return Unit Stats

Posted on by:

rembrandtreyes profile

Rembrandt Reyes (He/Him)

@rembrandtreyes

I am here to make myself a better engineer. I create things for the web using the ReactJS ecosystem.

Discussion

markdown guide