solidjsとurqlで実装

この記事は、SolidJSアドベントカレンダー 2024 3日目の記事です。

はじめに

アドベントカレンダーに向けてsolidについて調べ始めてわかったことなのですが、solidjsのライブラリはドキュメントに書かれてないことがちょくちょくあります。(storybookとか)

urqlもそうで、ドキュメントにはないのですが、npmパッケージ自体は存在しました。

READMEすらないので導入方法を解説します。

使ってみたところ導入自体は問題なく使えそうです。

検証したこと

• 導入方法
• query呼び出し
• Suspense
• cacheExchange

導入方法

solidstartに導入してみました。

pnpm add @urql/solid

src/app.tsx

export default function App() {
  const urqlClient = new UrqlClient({
    url: "http://localhost:3000/api/gql",
    exchanges: [cacheExchange, fetchExchange],
  });
  return (
    <UrqlProvider value={urqlClient}>
	    <Router ...
	  </UrqlProvider>
	)
}

reactと違ってclientをmemoで管理する必要がないのが便利です。

Query呼び出し

普通にできます。(graphqlの型生成についてはこちら)

import { Title } from "@solidjs/meta";
import { createQuery } from "@urql/solid";
import { createSignal, Index, Show } from "solid-js";
import { graphql } from "~/gql";

const PostQuery = graphql(`
	query PostQuery {
		posts {
			id
			title
			author {
				firstName
				lastName
			}
		}
	}`);

export default function Page() {
  const [result] = createQuery({ query: PostQuery, variables: {} });
  return (
    <main>
      <Title>GQL/URQL</Title>
      <h1>GQL/URQL</h1>
      <Show when={result.data}>
        {(d) => {
          return (
            <div>
              <Index
                each={d().posts?.filter((p) => p != null)}
                fallback={<div>Loading...</div>}
              >
                {(post) => (
                  <div>
                    <h2>{post().title}</h2>
                    <p>
                      {post().author?.firstName} {post().author?.lastName}
                    </p>
                  </div>
                )}
              </Index>
            </div>
          );
        }}
      </Show>
    </main>
  );
}

Suspense

• Suspenseをtrueにするとサーバーサイドでフェッチが行われ、falseにするとクライアントサイドフェッチになる

設定方法

// client作成時なら
  const urqlClient = new UrqlClient({
    url: "http://localhost:3000/api/gql",
    exchanges: [cacheExchange, fetchExchange],
    suspense: true,
  });
  
// query呼び出し時なら
const [result] = createQuery({ query: PostQuery, variables: {}, context:{suspense: true} })

cacheExchange

問題なく動きました。

補足：cacheExchangeの役割

Mutationの結果に__typenameが含まれるとその__typenameを含むQueryを再フェッチする。

ちなみにgraphqlで取得するあらゆるデータに__typenameはデフォルトで含まれていて、jsonで構成されるレスポンスの各オブジェクトの型を判別するために使われている。（graphqlのレスポンスを見ると分かりやすいです。）