We have refined our GraphQL endpoint to give you absolute control over your data. Fetch exactly what you need, sort it by any custom field, and handle pagination with effortless grace. It is faster, leaner, and designed for high-performance builds.
Karol is a PHP Developer at Flotiq with over 12 years of experience at CodeWave, including 8 years working on Flotiq. He specializes in building reliable backend solutions and long-term, scalable systems. With deep knowledge of the platform and its evolution, Karol plays a key role in maintaining and developing the core of Flotiq.
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:
.png)
{
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.
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
}
}
}
}
}
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
}
}
}
}
}
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
}
}
}
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
}
}
}
}
}
}
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.
: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;
}
'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;
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.