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!

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."

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