Frontend Framework API Intro

—

### 🏠 Welcome to API Explorer – Your Guide to Modern Frontend Frameworks!

#### 🔍 Build Powerful Interfaces with the Right Tools

At API Explorer, we focus on helping developers understand and integrate **APIs** using the best frontend technologies available today. Whether you're just starting out or looking to level up your skills, we provide clean examples and practical insights using:

—

### ⚛️ **React** – Declarative & Component-Based
React is a JavaScript library developed by Facebook for building fast and interactive user interfaces.
– 🚀 Build UI using reusable components
– ⚙️ Ideal for SPAs (Single Page Applications)
– 📦 Strong ecosystem with libraries like Redux, React Router, etc.
Explore how to make API calls using **Axios**, **fetch**, and React Hooks!

[Learn React API Integration →]

—

### 🔵 **Vue.js** – The Progressive JavaScript Framework
Vue offers a flexible and approachable structure for frontend development.
– 🧩 Two-way binding & reactive data
– 💡 Simple to integrate into projects
– 🔧 Great for small to mid-sized projects
Dive into **Axios integration**, **Vuex**, and reactive forms powered by API data.

[Explore Vue API Examples →]

—

### 🔴 **Angular** – Enterprise-Ready Framework
Angular, backed by Google, is a powerful full-fledged framework for large-scale applications.
– 🏗️ Built-in routing, state management, and testing
– 📐 TypeScript-based architecture
– 🛡️ Ideal for enterprise-level applications
Learn how to structure services, use **HttpClient**, and handle **RxJS** observables for API calls.

[Master Angular API Handling →]

—

### 🌐 Why This Matters?
APIs are the bridge between your frontend and the data. Knowing how to integrate them properly across different frameworks is essential for modern web development. Let us help you get there, one call at a time.

—

Would you like this content styled in HTML or Bootstrap layout?

—

### ⚛️ React – Fetching and Displaying Images from an API

In React, you can use the `fetch` API to retrieve images and display them using the `useEffect` and `useState` hooks.

import React, { useEffect, useState } from "react";

function App() {
  const [imgSrc, setImgSrc] = useState(null);

  useEffect(() => {
    fetch("https://example.com/image.jpg")
      .then((res) => res.blob())
      .then((blob) => {
        const url = URL.createObjectURL(blob);
        setImgSrc(url);
      });
  }, []);

  return <img src={imgSrc} alt="Fetched from API" />;
}

export default App;

This approach fetches the image as a blob and creates a URL to display it in an `img` tag. citeturn0search3

—

### 🟢 Vue.js – Displaying Images from an API Response

In Vue.js, you can use Axios to fetch image URLs from an API and bind them to your template using the `v-for` directive.

<template>
  <div>
    <img v-for="(img, index) in images" :key="index" :src="img.url" alt="API Image" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      images: [],
    };
  },
  mounted() {
    axios.get('https://api.example.com/images')
      .then(response => {
        this.images = response.data;
      });
  },
};
</script>

This code fetches an array of image URLs from the API and renders them dynamically. citeturn0search1

—

### 🔴 Angular – Fetching and Displaying Images from an API

In Angular, you can create a service to fetch images and display them in your component using the `HttpClient` module.

// image.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ImageService {
  constructor(private http: HttpClient) {}

  getImages() {
    return this.http.get<any[]>('https://api.example.com/images');
  }
}

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { ImageService } from './image.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let img of images">
      <img [src]="img.url" alt="API Image" />
    </div>
  `,
})
export class AppComponent implements OnInit {
  images: any[] = [];

  constructor(private imageService: ImageService) {}

  ngOnInit() {
    this.imageService.getImages().subscribe(data => {
      this.images = data;
    });
  }
}

This setup uses a service to fetch image data and displays it using Angular's `*ngFor` directive. citeturn0search2

—

These examples demonstrate how to fetch and display images from an API using React, Vue.js, and Angular. You can incorporate these code snippets into your homepage to provide practical illustrations for each framework.

If you need further assistance or specific implementations, feel free to ask!

—

### ✅ 1. **Make sure WPGraphQL plugin is installed and active**
Your WordPress site must have the [WPGraphQL](https://www.wpgraphql.com/) plugin installed and activated.

—

### ✅ 2. **Check what is set as the front page in WordPress**
WordPress stores the front page ID in `options`, but WPGraphQL resolves it automatically with the `nodeByUri` or `homepage` query.

—

### ✅ 3. **GraphQL Query to Get Homepage Content**

query GetHomepage {
  homepage {
    id
    title
    content
    uri
  }
}

🔹 This gets the page set as **Homepage** under *Settings > Reading*.
🔹 `content` will return HTML content from the WordPress block editor or classic editor.

—

### ✅ 4. **React Example using Apollo Client**

#### 📦 Install Apollo if not already done:

npm install @apollo/client graphql

#### 🧠 Apollo Setup (`ApolloProvider.js`)

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://yourwordpresssite.com/graphql', // Replace with your WP GraphQL endpoint
  cache: new InMemoryCache(),
});

export default function MyApp({ children }) {
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

#### 🖼️ `HomePage.js` Component

import React from 'react';
import { gql, useQuery } from '@apollo/client';

const HOMEPAGE_QUERY = gql`
  query GetHomepage {
    homepage {
      id
      title
      content
    }
  }
`;

const HomePage = () => {
  const { loading, error, data } = useQuery(HOMEPAGE_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading homepage: {error.message}</p>;

  const { title, content } = data.homepage;

  return (
    <div>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
};

export default HomePage;

—

### 🛠️ Notes
– `dangerouslySetInnerHTML` is required to render the HTML returned from WordPress.
– Make sure CORS and permalinks are properly configured in WordPress.

Would you like the same setup using Fetch/Axios instead of Apollo?

– Using an older version of WPGraphQL that **doesn’t yet include `homepage`**, or
– Your theme/plugins didn’t register `homepage` as a custom field in the schema.

—

### ✅ Correct Way to Fetch WordPress Home Page Content (Fallback Using `page`)

Instead of `homepage`, use the `page(id: ID)` or `nodeByUri(uri: String)` method to fetch the static homepage set under **Settings → Reading**.

—

### 🧩 Step 1: Get the Homepage URI from WordPress Settings

Go to **WordPress Admin → Settings → Reading**
Note the **selected page** under *Homepage*. Let’s say it’s a page titled **Welcome**, and the permalink is `/welcome`.

—

### ✅ Step 2: Updated GraphQL Query Using `nodeByUri`

query GetHomePage {
  nodeByUri(uri: "/welcome") {
    ... on Page {
      id
      title
      content
    }
  }
}

—

### ✅ Step 3: Use It in React with Apollo

import React from 'react';
import { gql, useQuery } from '@apollo/client';

const GET_HOME_PAGE = gql`
  query GetHomePage {
    nodeByUri(uri: "/welcome") {
      ... on Page {
        id
        title
        content
      }
    }
  }
`;

const HomePage = () => {
  const { loading, error, data } = useQuery(GET_HOME_PAGE);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading homepage: {error.message}</p>;

  const { title, content } = data.nodeByUri;

  return (
    <div>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
};

export default HomePage;

—

### 🧠 Bonus: Make the URI dynamic via WordPress REST or WPGraphQL Options

You can fetch the `frontPage` ID via this GraphQL query:

query {
  generalSettings {
    url
  }
  readingSettings {
    frontPage {
      id
      title
      uri
    }
  }
}

Would you like a full dynamic setup using this `readingSettings` query too?

—

### ✅ Step-by-Step WPGraphQL Query to Get Homepage Content:

query GetHomePageContent {
  readingSettings {
    frontPage {
      id
      title
      content
      uri
    }
  }
}

This query works **only if you have a static page set as the homepage** in:

> **WP Admin → Settings → Reading → “Your homepage displays” = A static page**

—

### 🧠 Explanation:

– `readingSettings.frontPage` returns the page object assigned as the homepage.
– You get the `id`, `title`, `content`, and `uri` in one request.

—

### ✅ React (Apollo) Example:

import React from 'react';
import { gql, useQuery } from '@apollo/client';

const GET_HOMEPAGE_CONTENT = gql`
  query GetHomePageContent {
    readingSettings {
      frontPage {
        id
        title
        content
      }
    }
  }
`;

const HomePage = () => {
  const { loading, error, data } = useQuery(GET_HOMEPAGE_CONTENT);

  if (loading) return <p>Loading homepage...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const page = data.readingSettings.frontPage;

  return (
    <div>
      <h1>{page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </div>
  );
};

export default HomePage;

—

### 🛠️ Requirements:

– **WPGraphQL plugin version >= 1.6.0**
– Homepage must be set to a **static page** in WordPress settings

Would you like a fallback code if no static homepage is set?

—

### ✅ Fix Options:

#### 1. **Upgrade WPGraphQL**
Make sure you're using the **latest version** of the WPGraphQL plugin:

– Go to **Plugins → Installed Plugins**
– Look for **WPGraphQL**
– Upgrade it to the latest version (preferably **v1.6.0 or higher**)

—

#### 2. **Fallback Method: Use `generalSettings` + `nodeByUri`**

If you **can’t upgrade**, use the following safe fallback query:

—

### ✅ Step-by-Step Fallback: Use Static URI Instead

Let’s say your homepage slug is `/welcome` (from Settings → Reading → Homepage)

#### ✅ GraphQL Query:

query GetHomepageByUri {
  nodeByUri(uri: "/welcome") {
    ... on Page {
      id
      title
      content
    }
  }
}

—

### ✅ React (Apollo Client) Example:

import React from 'react';
import { gql, useQuery } from '@apollo/client';

const GET_HOMEPAGE_BY_URI = gql`
  query GetHomepageByUri {
    nodeByUri(uri: "/welcome") {
      ... on Page {
        id
        title
        content
      }
    }
  }
`;

const HomePage = () => {
  const { loading, error, data } = useQuery(GET_HOMEPAGE_BY_URI);

  if (loading) return <p>Loading homepage...</p>;
  if (error) return <p>Error loading homepage: {error.message}</p>;

  const page = data.nodeByUri;

  return (
    <div>
      <h1>{page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </div>
  );
};

export default HomePage;

—

### ✅ Tip to Dynamically Get URI
To avoid hardcoding `/welcome`, you can retrieve the homepage ID via REST or ACF, or expose it manually as a custom GraphQL field.

Would you like help making this dynamic (e.g., auto-fetching the homepage URI or ID)?

But if you're getting the error:

> ❌ `Cannot query field "frontPage" on type "ReadingSettings"`

That suggests either:

### 🛠️ Possible Causes & Fixes:

#### ✅ 1. **The WP Reading setting is NOT set to a static page**
Go to:

**WordPress Admin → Settings → Reading → "Your homepage displays"**
✅ Make sure **“A static page”** is selected and a specific **Page** is chosen as "Homepage".

If not, `frontPage` will not be exposed in the schema.

—

#### ✅ 2. **Rebuild WPGraphQL Schema (Flush Cache)**
Sometimes the schema cache doesn't refresh automatically. To force rebuild:

– Visit `/wp-admin/tools.php?page=graphql`
– Click **“Clear GraphQL Schema Cache”**
– Then refresh your GraphQL Explorer or restart your React app

—

#### ✅ 3. **Correct Working Query with WPGraphQL v2.1.1**

query GetHomePage {
  readingSettings {
    frontPage {
      id
      title
      content
      uri
    }
  }
}

—

### ✅ React Apollo Example (Working with v2.1.1)

import { gql, useQuery } from "@apollo/client";

const GET_HOMEPAGE = gql`
  query GetHomePage {
    readingSettings {
      frontPage {
        id
        title
        content
      }
    }
  }
`;

const HomePage = () => {
  const { loading, error, data } = useQuery(GET_HOMEPAGE);

  if (loading) return <p>Loading homepage...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const page = data.readingSettings.frontPage;

  return (
    <div>
      <h1>{page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </div>
  );
};

—

Would you like me to help you test the exact response from your GraphQL endpoint? You can share the slug of the homepage or I can give you a quick debug GraphQL query.

—

### ✅ Option 1: Remove the “ Rendering

**Before:**

<h1>{page.title}</h1>

**After:**

{/* <h1>{page.title}</h1> */}

—

### ✅ Option 2: Conditional Rendering (optional use case)
If you want to **conditionally hide title only for homepage**, you can check the URI or ID:

{page.uri !== "/" && <h1>{page.title}</h1>}

—

### ✅ Final Clean Version (Title Hidden):

import { gql, useQuery } from "@apollo/client";

const GET_HOMEPAGE = gql`
  query GetHomePage {
    readingSettings {
      frontPage {
        id
        title
        content
        uri
      }
    }
  }
`;

const HomePage = () => {
  const { loading, error, data } = useQuery(GET_HOMEPAGE);

  if (loading) return <p>Loading homepage...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const page = data.readingSettings.frontPage;

  return (
    <div>
      {/* Title is intentionally hidden */}
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </div>
  );
};

export default HomePage;

Would you like to apply custom CSS to hide it globally from WordPress output instead?

—

### ✅ 1. **Using `&&` (Logical AND) – Like `v-if`**

{showTitle && <h1>Hello World</h1>}

👉 Renders “ **only if** `showTitle` is `true`.

—

### ✅ 2. **Using Ternary `? :` Operator**

{isLoggedIn ? <p>Welcome!</p> : <p>Please login</p>}

👉 Think of this as `v-if / v-else`.

—

### ✅ 3. **Return `null` to Hide**

const MyComponent = ({ show }) => {
  if (!show) return null;
  return <div>Visible only when show is true</div>;
};

—

### ✅ Example in Your Context (Hide title like `v-if`):

{page.title && <h1>{page.title}</h1>}

OR, to skip homepage title only:

{page.uri !== "/" && <h1>{page.title}</h1>}

—

Let me know if you want `v-show` equivalent too (just hide via CSS).