React.js Render new page from API data using Slug. (click on an article from a list of articles and direct to the page where that article is)

Since the data between the two pages/components is identical then I'd suggest fetching is once in a parent component and making it available to descendants via a React context.

Create a layout route that fetches the posts and provides it via an Outlet component's context. This is effectively just moving the fetching logic from AllPosts to a new layout route component.

import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import axios from "axios";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
  Outlet
} from "react-router-dom";
import AllPosts from "./Pages/AllPosts/AllPosts";
import OnePost from "./Pages/OnePost/OnePost";

const queryClient = new QueryClient();

const endpoint =
  "https://api-ap-southeast-2.hygraph.com/v2/clcdbkbxr45xk01tcdpxgg3sh/master";

const QUERY = `
{
  posts {
    id
    title
    slug
    coverPhoto {
      createdBy {
        id
      }
      url
    }
  }
}
`;

const PostsLayout = () => {
  const { data, isLoading, error } = useQuery("blog_posts", async () => {
    const response = await axios({
      url: endpoint,
      method: "POST",
      data: {
        query: QUERY
      }
    });
    return response.data.data;
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return <Outlet context={{ posts: data.posts }} />;
};

Render the layout route to wrap the two existing routes.

const App = () => (
  <QueryClientProvider client={queryClient}>
    <Router>
      <Routes>
        <Route path="/posts" element={<PostsLayout />}>
          <Route index element={<AllPosts />} />
          <Route path=":id" element={<OnePost />} />
        </Route>
        <Route path="*" element={<Navigate to="/posts" replace />} />
      </Routes>
    </Router>
  </QueryClientProvider>
);

Update AllPposts to use the useOutletContext hook to access the provided posts context value.

import BlogCard from "../../components/BlogCard";
import { useOutletContext } from "react-router-dom";

const AllPosts = () => {
  const { posts } = useOutletContext();

  return (
    <div>
      <h1>Top Web Development Resources 2023</h1>
      <ul>
        {posts.map((post) => (
          <BlogCard {...post} key={post.id} />
        ))}
      </ul>
    </div>
  );
};

Update BlogCard to correctly render that link to the details route.

import { Link } from "react-router-dom";

const BlogCard = ({ coverPhoto, id, title }) => {
  return (
    <div className="card">
      <Link to={`/posts/${id}`}>
        <h2>{title}</h2>
        <img
          src={coverPhoto ? coverPhoto.url : null}
          alt=""
          height={200}
          width={200}
        />
      </Link>
    </div>
  );
};

Update OnePost to access the id route path parameter and the posts array and find the matching post by id.

import { useOutletContext, useParams } from "react-router-dom";

const OnePost = () => {
  const { id } = useParams();
  const { posts } = useOutletContext();

  const post = posts.find((post) => post.id === id);

  if (!post) {
    return <div>No post.</div>;
  }

  return (
    <div>
      <h1>One Post Page</h1>
      <img
        src={post.coverPhoto ? post.coverPhoto.url : null}
        alt="cover art"
        height={200}
        width={600}
      />
      <h2>{post.title}</h2>
    </div>
  );
};