Backend Integration

Understanding Backend Integration

Modern web applications often require interaction with backend services to handle data persistence, authentication, and business logic. React applications can communicate with these services through various methods, with REST APIs and GraphQL being the most common approaches.

Understanding how to effectively integrate with backend services is crucial for building full-stack applications.

REST API Integration

REST (Representational State Transfer) is a popular architectural style for designing networked applications. It uses standard HTTP methods to perform operations on resources.

Example: Using Fetch API

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchUsers() {
      try {
        const response = await fetch('https://api.example.com/users');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchUsers();
  }, []);

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

GraphQL Integration

GraphQL is a query language for APIs that allows clients to request exactly the data they need. It provides a more flexible and efficient alternative to REST APIs.

Example: Using Apollo Client

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

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
      posts {
        title
      }
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <ul>
            {user.posts.map(post => (
              <li key={post.title}>{post.title}</li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
}

Backend Integration Best Practices

Integrating Firestore with React

Firestore is a scalable NoSQL cloud database provided by Firebase. It stores data in collections and documents (similar to folders and JSON objects). It's ideal for real-time apps like chats, dashboards, and collaborative tools.

In a React app, you typically use Firestore via Firebase’s SDK and structure your logic using either services or custom hooks. You can fetch data once or subscribe to real-time updates.

1. Setup Firebase

// firebaseConfig.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-project-id.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
  

2. Fetch Data Once (Read Only)

import { useEffect, useState } from "react";
import { getDocs, collection } from "firebase/firestore";
import { db } from "./firebaseConfig";

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

  useEffect(() => {
    async function fetchData() {
      const querySnapshot = await getDocs(collection(db, "products"));
      const data = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setProducts(data);
    }

    fetchData();
  }, []);

  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}
  

3. Listen for Real-Time Updates

import { onSnapshot, collection } from "firebase/firestore";

useEffect(() => {
  const unsub = onSnapshot(collection(db, "products"), (snapshot) => {
    const updated = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    setProducts(updated);
  });

  return () => unsub(); // stop listener on unmount
}, []);
  

4. Add a New Document

import { addDoc, collection } from "firebase/firestore";

async function addProduct(newProduct) {
  await addDoc(collection(db, "products"), newProduct);
}
  

🔥 Advantages of Firestore:

• Real-time sync: Firestore automatically updates all connected clients in real time.
• Scalability: Easily scales with your application needs.
• Offline support: Apps continue to work even without an internet connection.
• Built-in security rules: Control access to your data with Firebase rules.
• No need for your own backend – managed by Google.

⚠️ Disadvantages of Firestore:

• Pricing can get expensive at scale, especially with high reads/writes.
• No relational database features like JOINs – data must be structured accordingly.
• Limited querying options compared to SQL (no "OR" queries between fields, etc.).
• Tightly coupled to Firebase ecosystem (vendor lock-in).