Fetch third-party API data with Hydrogen
Hydrogen includes a built-in client and utilities for fetching data with Shopify's Storefront API and Customer Account API.
If you need to access data from third-party sources, then you can re-use these utilities and design patterns. By consistently using the same methods for data fetching regardless of the source, your app logic is simpler to understand, and your app will be more performant.
What you'll build
Anchor link to section titled "What you'll build"
In this guide, you'll use Hydrogen's built-in utilities to query the GraphQL Rick and Morty API and display a list of characters.
This simplified example shows how to re-use Hydrogen tools to create a new API client, add it to the Remix context, and query your data from any route.
Step 1: Create a new third-party API client
Anchor link to section titled "Step 1: Create a new third-party API client"The following example re-uses existing Hydrogen utilities to create an API client that handles caching with the same tooling and method that Hydrogen uses for Shopify API queries. This keeps data fetching and caching behaviors consistent across your app.
Step 2: Create the API client and pass to the Remix context
Anchor link to section titled "Step 2: Create the API client and pass to the Remix context"You can now add your API client to the Remix server file so it's available to load data from your routes.
If you're using TypeScript, then you should also add the client to your Remix type declaration file.
Step 3: Query and render the list of entries
Anchor link to section titled "Step 3: Query and render the list of entries"You can now query your rickAndMorty API client from any loader function, on any route, using the same caching utilities that Hydrogen uses to query Shopify's Storefront API.
The following simplified example shows how to render an unordered list of character names on the /characters route:
Run shopify hydrogen dev to start the development server, then open http://localhost:3000/characters to verify that the query succeeded.
- If you haven't already, learn about querying first-party Shopify APIs with Hydrogen
- Learn more about caching third-party API data with Hydrogen