DEV Community

Rembrandt Reyes (He/Him)
Rembrandt Reyes (He/Him)

Posted on

1 2

eSlayers part 5 - data fetching strikes back

So I went back to working on my application, and my website broke. I was trying to fetch my summoner name and it would throw an error when it tried fetching data for my rankings.

I did some digging and it turns out the data that was being returned from the first fetch was not finished so by the time it got to the second fetch it would error out. Since I am using useSWR I had to read the docs to see if there was anything that I could use that would allow me to fetch data dependent on the first fetch.

Conditional Fetching

useSWR allows you to fetch data dependent on whatever you want. In my case, I need to make my fetch dependent on the summoner name and summoner ID being passed into my fetches.

I refactored some of my code so now I can reuse fetching summoner and fetching league

fetchSummoner.ts
Fetch Summoner

fetchLeague.ts
Fetch League

Summoner.tsx
Summoner Component

Now that I figured that headache out I can move on to fetching match history.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️