2 min read
Step 3: Fetching Data
Call an API to get Open Graph data.
The Challenge
Browsers can’t directly fetch other websites due to CORS restrictions. We need a service that fetches the page and extracts the Open Graph data.
Add the Fetch Logic
When the user submits a URL, fetch Open Graph data using
a service like opengraph.io or similar.
If that doesn't work, we can use a simple proxy approach
or a serverless function.
Show loading while fetching, then display the results
in the preview card.Handle the Response
Claude will set up the fetch logic. Once it’s working:
Parse the response and display:
- og:title in the card title
- og:description in the card description
- og:image as the preview image
- The domain from the URLError Handling
Handle these error cases:
- Invalid URL (not a valid URL format)
- Fetch failed (network error or service down)
- No OG data (page doesn't have Open Graph tags)
Show helpful error messages for each.Test It
Try some URLs:
- A popular website (should have OG data)
- A URL without OG tags
- An invalid URL
All cases should be handled gracefully.
Checkpoint
- URL submission works
- Data fetches and displays
- Error cases handled
- Loading state shows during fetch
What You Learned
- How to fetch external data
- Working with APIs
- Error handling patterns
- CORS and why proxies are sometimes needed