<?php
// Import Your Personal API SDK
require_once('lib/flotiq-sdk/vendor/autoload.php');

// Configure API
$config = OpenAPI\Client\Configuration::getDefaultConfiguration()
    ->setApiKey('X-AUTH-TOKEN', '__FLOTIQ_API_KEY__');

// Request projects
$projectsApi = new OpenAPI\Client\Api\ContentProjectApi(null, $config);
$projects = $projectsApi->listProject(1, 10);

echo "Projects count: {$projects->getTotalCount()}";

foreach ($projects->getData() as $project) {
    echo $project->getId();
    echo $project->getName();
}

// File: /src/pages/{project.slug}.js 
// Using gatsby-source-flotiq plugin

import React from 'react';
import { graphql } from 'gatsby';

const ProjectPage = ({ data }) => {
    const { project } = data;
    return (
        <article>
            <h2>{project.name}</h2>
            <p>{project.description}</p>
        </article>
    );
};

export const query = graphql`
    query($slug: String) {
        project(slug: {eq: $slug}, status: {eq: "public"}) {
          name
          description
        }
    }
`;

export default ProjectPage;

// File: pages/projects/[id].js
// Using auto generated SDK package

import { ApiClient, ContentProjectApi } from '../../lib/flotiq-sdk';

ApiClient.instance
    .authentications['HeaderApiKeyAuth']
    .apiKey = process.env.FLOTIQ_API_KEY;

export async function getStaticPaths() {
    const ProjectsApi = new ContentProjectApi();
    const projects = await ProjectsApi.listProject({
        limit: 1000
    });
    // ...
}

export async function getStaticProps({ params }) {
    const ProjectsApi = new ContentProjectApi();
    const project = await ProjectsApi.getProject(params.id)
    // ...
}

export default function Project({ project }) {
    return (
        <article>
            <h2>{project.name}</h2>
            <p>{project.description}</p>
        </article>
    )
}

import { useEffect, useState } from "react";
import { ContentProjectApi } from "./lib/flotiq-sdk/";

function App() {
  const [projects, setProjects] = useState([]);
  const [total, setTotal] = useState();

  useEffect(() => {
    (async function() {
      const projectsApi = new ContentProjectApi();
      const apiResponse = await (projectsApi.listProject());
      setProjects(apiResponse.data);
      setTotal(apiResponse.total_count);
    })();
  }, []);

  return (
    <>
      <h1>Projects {total}</h1>
      { projects.map((project) => (
          <div key={project.id}>
            <h2>{project.name}</h2>
            <p>{project.description}</p>
          </div>
      ))}
    </>
  );
}

export default App;

import { Component, OnInit } from '@angular/core';
import { ContentProjectService, Project } from "flotiq";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit{
  projects: Project[] | undefined;
  total = 0;

  // Inject your Personal API
  constructor(private readonly projectsService: ContentProjectService) { }

  ngOnInit() {
    // Use available methods and response
    this.projectsService.listProject().subscribe((res) => {
      this.total = res.total_count
      this.projects = res.data;
    })
  }
}