Skip to main content

​
Connect Your Frontend

Use the CubeStack API to display data in your web application.

​
Using Fetch API

const API_URL = 'https://api.cubestack.app/api/v1/my-project';

async function getProducts() {
  const response = await fetch(`${API_URL}/products`);
  const { data } = await response.json();
  return data;
}
For public cubes, no authentication is needed. Only public columns are returned.

​
React Example

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://api.cubestack.app/api/v1/my-project/products')
      .then(res => res.json())
      .then(({ data }) => setProducts(data));
  }, []);

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name} - ${product.price}</li>
      ))}
    </ul>
  );
}

​
Next.js Example

export async function getStaticProps() {
  const res = await fetch('https://api.cubestack.app/api/v1/my-project/products');
  const { data } = await res.json();

  return {
    props: { products: data },
    revalidate: 60
  };
}

​
Server-Side with API Key

For server-side code, use your API key for full access: 
const response = await fetch(`${API_URL}/products`, {
  headers: { 'X-Api-Key': process.env.CUBESTACK_API_KEY }
});
Never expose your API key in client-side code. Use public access for browser requests.