Let’s talk about celestial bodies. To show you exactly how to handle our updated GraphQL endpoint, we are going to build a sleek and data-driven site dedicated to the planets. This example demonstrates how to communicate with Flotiq using our refined schema to create a high-speed, orbital user experience.
To list every object and strip back every field, in this case for our planets, you will need to send a bespoke query to the Flotiq GraphQL endpoint:
{
planets {
edges {
node {
id
name
order_from_the_sun
excerpt
content
picture {
id
url
}
gallery {
picture {
id
url
}
}
}
}
}
}
The result is clean, structured, and not unlike a classic API response, but with that GraphQL finesse.
Streamlining the Experience
When we are building a smooth homepage, we do not want to be weighed down by unnecessary data. We only want the essentials for our list view. By specifying exactly what we need, we keep the payload light and the performance tight:
{
planets {
edges {
node {
id
name
excerpt
picture {
url
}
}
}
}
}
Elegance in Order
While news portals obsess over dates, the cosmos demands a different kind of logic. For our planets, it makes far more sense to sort them by their proximity to the Sun. We can achieve this order effortlessly by modifying the query:
{
planets (order_by: "order_from_the_sun", order_direction: "asc"){
edges {
node {
id
name
excerpt
picture {
id
url
}
}
}
}
}
Control and Pagination
To truly master the flow, we need to handle limits and pagination. By adjusting the offset and first values, you can pull exactly what you want, when you want it. Here is a refined query that fetches three objects at a time, keeping you informed with totalCount and hasNextPage:
{
planets (first: 3, offset: 1, order_by: "order_from_the_sun", order_direction: "asc"){
edges {
node {
id
name
excerpt
picture {
id
url
}
}
}
totalCount
pageInfo {
hasNextPage
}
}
}
The Deep Dive: Individual Elements
Now that the list is looking sharp, it is time for the intimate details. When a user selects a specific planet, we fetch the full story using its unique ID. This is where we bring in the heavy-hitting content, the full gallery, and the technical specs:
{
planets(id: "06b5c42a-9e24-4b73-aba8-b9362096cf2f") {
edges {
node {
name
content
order_from_the_sun
picture {
url
}
gallery {
picture {
url
}
}
}
}
}
}
The Galactic React Implementation
To finish our celestial build, let's look at how to implement this in a React application. We will use a sleek approach with modern CSS to ensure your planetary data looks premium and seductive.
Cosmic Styles (App.css)
:root {
--space-black: #050505;
--starlight: #f0f0f0;
--nebula-purple: #6366f1;
--glass-effect: rgba(255, 255, 255, 0.05);
}
body {
background-color: var(--space-black);
color: var(--starlight);
font-family: 'Inter', system-ui, sans-serif;
margin: 0;
padding: 2rem;
}
.planet-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.planet-card {
background: var(--glass-effect);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1.5rem;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.planet-card:hover {
transform: translateY(-8px);
border-color: var(--nebula-purple);
}
.planet-card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 1.25rem;
}
React Component (PlanetList.jsx)
'use client'
import React, { useEffect, useState } from 'react';
import './App.css';
interface PlanetNode {
id: string;
name: string;
excerpt: string;
picture: { url: string }[];
}
interface GraphQLResponse {
data: {
planets: {
edges: { node: PlanetNode }[];
};
};
}
const PLANETS_QUERY = `
query GetPlanets {
planets(first: 8, offset: 0, order_by: "order_from_the_sun", order_direction: "asc") {
edges {
node {
id
name
excerpt
picture {
url
}
}
}
}
}
`;
const PlanetList: React.FC = () => {
const [planets, setPlanets] = useState<PlanetNode[]>([]);
const [loading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchPlanets = async () => {
const response = await fetch('https://api.flotiq.com/api/v2/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Auth-Token': 'YOUR_FLOTIQ_API_KEY'
},
body: JSON.stringify({
query: PLANETS_QUERY,
}),
});
const result: GraphQLResponse = await response.json();
setPlanets(result.data.planets.edges.map(edge => edge.node));
setLoading(false);
};
fetchPlanets();
}, []);
if (loading) return <p>Loading the cosmos...</p>;
return (
<section>
<div className="planet-grid">
{planets.map((planet) => (
<article key={planet.id} className="planet-card">
<img src={`https://api.flotiq.com/${planet.picture[0]?.url}`} alt={planet.name} />
<h3>{planet.name}</h3>
<p>{planet.excerpt}</p>
</article>
))}
</div>
</section>
);
};
export default PlanetList;
Summary
By leveraging these updates, you have built a sophisticated data pipeline. Your homepage is lightweight and fast because it only fetches essential fields. Your navigation is intuitive because it uses logical sorting. Most importantly, your application is scalable thanks to built-in pagination. You now have a fully armed and operational GraphQL implementation that is perfectly optimised for a premium developer experience.
.png)
