urqlでSSRするには #

// client/main.tsx
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { App } from "./App";

(() => {
  const json = JSON.parse(
    document.getElementById("json").getAttribute("data-json")
  );
  ReactDOM.hydrate(
    <BrowserRouter>
      <App props={json} />
    </BrowserRouter>,
    document.getElementById("main")
  );
})();

// server/render.tsx
import React, { createElement } from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import { App } from "../client/App";
import Html from "./Html";

export async function render({
  url,
  title,
  description,
  image,
  props,
}: {
  url: string;
  title: string;
  description: string;
  image: string;
  props?: any;
}) {
  return ReactDOMServer.renderToString(
    <React.StrictMode>
      <StaticRouter location={url}>
        {createElement(
          Html({
            children: () => <App props={props} />,
            title,
            description,
            image,
            props,
          })
        )}
      </StaticRouter>
    </React.StrictMode>
  );
}

// client/App.tsx
import React from "react";
import { Routes, Route } from "react-router-dom";
import { Home } from "./pages/Home";
import { Provider } from "urql";
import { initUrqlClient } from "../shared/graphql/initUrqlClient";

export const App: React.FC<{
  props: any;
}> = ({ props }): JSX.Element => {
  const client = initUrqlClient({
    url: "https://api.takurinton.com/graphql",
  });

  return (
    <>
      <Provider value={client}>
        <Routes>
          <Route path="/" element={<Home props={props} />} />
        </Routes>
      </Provider>
    </>
  );
};

// client/pages/Home/Home.tsx
import React, { useEffect } from "react";
import { Layout } from "../../Layout";
import {
  Heading,
  Container,
  PageContainer,
  PrevButton,
  NextButton,
} from "./styled";
import { Link } from "../../components/utils/styled";
import { datetimeFormatter } from "../../../shared/utils/datetimeFormatter";
import { TypographyWrapper } from "../../components/Typography";
import { CategoryWrapper } from "../../components/Button/Category";
import { getHashByData } from "../../utils/getHashByData";
import { useQuery } from "./internal/useQuery";
import { useLocation } from "react-router";

export const Home: React.FC<{ props: Props }> = Layout(({ props }) => {
  const query = useQuery();

  const pages = query.get("page") ?? 1;
  const category = query.get("category") ?? "";
  const data = getHashByData(props); // props のデータを取得
  const posts = typeof window === 'undefined' ? data.getPosts : getPosts(data, { pages, category }); // 次に説明

  return (
    <Container>
      <Heading>
        <TypographyWrapper text="全ての投稿一覧" weight="bold" tag="h1" />
      </Heading>
      {p.results.map((p) => (
        <div key={p.id}>
          <h2>
            <Link to={`/post/${p.id}`}>{p.title}</Link>
          </h2>
          <Link to={`/?category=${p.category}`}>
            <CategoryWrapper text={p.category} />
          </Link>
          <TypographyWrapper
            weight="bold"
            tag="p"
            text={datetimeFormatter(p.pub_date)}
          ></TypographyWrapper>
          <p>{p.contents}</p>
          <hr />
        </div>
      ))}
  );
});

// client/pages/Home/internal/getPosts.ts
const initialState = {
  current: 0,
  next: 0,
  preview: 0,
  category: "",
  results: [
    {
      id: 0,
      title: "",
      contents: "",
      category: "",
      pub_date: "",
    },
  ],
};

export const getPosts = (data, variables) => {
  let res = undefined;
  if (!data.getPosts) {
    const [response] = useQuery({
      query: POSTS_QUERY,
      variables,
    });
    res = response;
  }

  if (data.getPosts) {
    // getPosts はあるけど、最新の値ではないから書き換えたいとき
    if (
      variables.category !== data.getPosts.category ||
      variables.pages !== data.getPosts.current
    ) {
      // 初期レンダリングがホームで、クエリパラメータで遷移するとき
      return res.data === undefined ? initialState : res.data.getPosts;
    }

    // hydrate 用
    return data.getPosts;
  }

  // 別の画面で初期レンダリングしてから、ホームに遷移するとき
  return res.data === undefined ? initialState : res.data.getPosts;
};