Building It

// src/api/client.ts
// EXPO_PUBLIC_ variables are inlined into the bundle at build time, so
// this is the only file that knows the base URL.
const BASE_URL = process.env.EXPO_PUBLIC_API_URL ?? "https://api.example.com";
// ?? is shorthand for: EXPO_PUBLIC_API_URL == null ? fallback : the value.

export class ApiError extends Error {
  constructor(message: string, readonly status: number) {
    super(message);
  }
}

let accessToken: string | null = null;

export function setAccessToken(token: string | null) {
  accessToken = token;
}

export async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
  const response = await fetch(`${BASE_URL}${path}`, {
    ...init,
    headers: {
      // Only JSON bodies get this header. A FormData body must be left
      // alone so fetch can add its own multipart boundary.
      ...(typeof init.body === "string" ? { "Content-Type": "application/json" } : {}),
      ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
      ...init.headers,
    },
  });
  if (!response.ok) {
    throw new ApiError(`${init.method ?? "GET"} ${path} failed`, response.status);
  }
  return (await response.json()) as T;
}

// src/api/entries.ts
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import type { Entry, Feed } from "../domain/entry";
import { request } from "./client";

// Keys in one place, so no two screens can disagree about them.
export const entryKeys = {
  feed: ["feed"] as const,
  entry: (id: string) => ["entry", id] as const,
};

// An arrow function body without braces returns its expression. The
// longhand is: function getFeed(cursor) { return request(...); }
export const getFeed = (cursor: string | null) =>
  request<Feed>(`/entries?cursor=${cursor ?? ""}`);

export const getEntry = (id: string) => request<Entry>(`/entries/${id}`);

export async function uploadPhoto(uri: string): Promise<Entry> {
  const form = new FormData();
  // This three-field object is how a local file is attached on a device.
  // There is no File constructor and no input element here.
  form.append("photo", { uri, name: "entry.jpg", type: "image/jpeg" } as unknown as Blob);
  return request<Entry>("/entries/photo", { method: "POST", body: form });
}

export function useFeed() {
  return useInfiniteQuery({
    queryKey: entryKeys.feed,
    queryFn: ({ pageParam }) => getFeed(pageParam),
    // Both of these are required; there is no implicit first page.
    initialPageParam: null as string | null,
    getNextPageParam: (last: Feed) => last.nextCursor,
  });
}

export function useEntry(id: string) {
  return useQuery({ queryKey: entryKeys.entry(id), queryFn: () => getEntry(id) });
}

// app/entry/[id].tsx
// On screen: a spinner, then a bold title with the body text beneath it,
// or one line of failure text. Nothing else lives in a route file.
import { useLocalSearchParams } from "expo-router";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import { useEntry } from "../../src/api/entries";

export default function EntryDetail() {
  // The name comes from the filename: [id] means a parameter called id.
  // Route parameters are always strings.
  const { id } = useLocalSearchParams<{ id: string }>();
  // isPending is the name for a query with no data yet.
  const { data, isPending, isError } = useEntry(id);

  if (isPending) return <ActivityIndicator style={styles.pad} />;
  if (isError || !data) {
    // A bare string here would throw. Text must wrap it.
    return <Text style={styles.pad}>This entry could not be loaded.</Text>;
  }

  return (
    <View style={styles.pad}>
      <Text style={styles.title}>{data.title}</Text>
      <Text>{data.body}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  pad: { padding: 16, gap: 8 },
  // fontWeight does not inherit to a nested View's Text children. Only
  // Text passes text styles down, and only to Text inside it.
  title: { fontSize: 20, fontWeight: "600" },
});