Response Caching with External APIs: Star Wars API

In today's world, most applications interact with external APIs and third-party services. However, working with large payloads can sometimes lead to slower response times, which can negatively impact the user experience. Fortunately, Xano's no-code platform offers a powerful solution: response caching powered by Redis. In this tutorial, we'll explore how to build an API endpoint that retrieves data from an external source and implement response caching to boost performance.

Setting Up the External API Request

Let's start by fetching data from the Star Wars API (https://swapi.dev), a fun resource that provides information about the Star Wars universe, including planets, characters, and movies. Our goal is to build an API endpoint that allows users to search for a planet by its name and retrieve its details.

1. Create a new custom function: In the Xano dashboard, navigate to the "Functions" section and create a new custom function called "Star Wars Planets".
2. Add an external API request: Within the function stack, open the "External API Request" section and paste the base URL `https://swapi.dev/api/planets` into the "URL" field. Since the Star Wars API doesn't require any additional parameters or headers, you can leave the other fields as is.
3. Extract the relevant data: Run the function to see the response payload. You'll notice that the data you need is nested under the `results` key. To access it, add a new "Create Variable" step in the function stack, select "Data Manipulation", and create a variable called `results`. In the variable value field, expand the response data and select the `results` sub-path.
4. Update the response: Finally, change the function's response to `results` to return only the relevant data.

Now, when you run the function, you'll get a clean array of all the Star Wars planets. However, our goal is to allow users to search for a specific planet by name, so let's move on to the next step.

Building the Search Functionality

1. Create a new API endpoint: In the Xano dashboard, navigate to the "APIs" section and create a new API endpoint called "Get Planet".
2. Insert the custom function: Within the API's function stack, insert the "Star Wars Planets" custom function you created earlier.
3. Add a text input: Add a text input field called "name" to the API endpoint. This will allow users to enter the planet name they want to search for.
4. Filter the results: Go back to the function stack and add a new "Find First Element" step under "Data Manipulation" -> "Arrays". Set the array to the `results` variable (the object array of planets), and define a custom expression that checks if the planet's `name` property matches the user's input from the "name" text field.
5. Update the response: Change the API endpoint's response to `planet` to return the matched planet object.

Now, when you run the API endpoint and enter a planet name (e.g., "Tatooine" or "Alderaan"), you'll receive the details of that specific planet. However, you may notice a slight delay in the response time, especially if the payload is large. This is where response caching comes into play.

Implementing Response Caching

Response caching is a powerful feature in Xano that can significantly improve the performance of your APIs by storing the response data in memory using Redis. This is particularly useful when working with large payloads or external APIs that may have slower response times.

1. Enable response caching: In the "Star Wars Planets" custom function, open the settings menu and enable response caching. You can choose to cache the response for a specific duration or use the default settings.
2. Test the caching: Run the "Get Planet" API endpoint again with a planet name. The first request may take some time, but subsequent requests for the same planet name should be nearly instantaneous, thanks to the cached response.
3. Explore caching options: Xano offers various settings for response caching, allowing you to customize the cache duration, size, and invalidation rules according to your application's needs. Refer to the documentation or the tutorial video for more details on these advanced options.

By implementing response caching, you've not only improved the performance of your API but also demonstrated the power of Xano's no-code platform in integrating external data sources and optimizing response times.

Conclusion

In this tutorial, we've covered how to fetch data from an external API, transform and filter the data to meet your application's requirements, and leverage Xano's response caching feature to boost performance. Whether you're a no-code enthusiast, citizen developer, traditional developer, or part of a startup or small business, Xano empowers you to build and deploy backend services without writing a single line of code.

Stay tuned for more exciting tutorials and updates from the Xano team. If you found this tutorial helpful, please subscribe to our YouTube channel, like the video, and share it with others who might find it useful. Happy coding (or no-coding)!