Zenn
Closed7

Next.js + Relay + TypeScriptの導入

HaruHaru

RelayをNext.js + TypeScriptで導入

https://relay.dev/docs/getting-started/step-by-step-guide/

基本は公式のガイドに沿う。

ざっくり必要なこと

  1. 必要なモジュールのインストール
  2. Next.js用に.babelrcとnext.config.jsの設定
  3. コンパイラの設定(relay-compiler)
  4. ランタイムの設定(relay-runtime)
  5. リクエスト処理

ここでは公式のガイドのみでは足りない、
RelayをNext.js + TypeScriptで導入する際に気をつける点を記載する。

HaruHaru

必要なモジュールについて

公式ガイドのモジュール

yarn add relay-runtime react-relay
yarn add --dev relay-compiler babel-plugin-relay

さらにTypeScript用に型定義ファイルの追加

yarn add --dev @types/react-relay
HaruHaru

Next.js用に.babelrcとnext.config.jsの設定

.babelrcにpresetとpluginsの追加

{
  "presets": ["next/babel"],
  "plugins": ["relay"]
}

next.config.js に、クライアントでNodejs用のモジュールをimportする際のfallbackの指定

module.exports = { 
  webpack: (config) => {
    // @see https://webpack.js.org/configuration/resolve/#resolvefallback
    config.resolve.fallback = { fs: false, module: false, path: false };
    return config;
  },
}
HaruHaru

relay-compilerの設定

SDL形式の .graphql スキーマを用意する。
GitHub APIをリクエストする場合は、公式通りにcurlしリポジトリ直下に schema.graphql をダウンロードする

cd your-app-name
curl https://raw.githubusercontent.com/relayjs/relay-examples/main/issue-tracker/schema/schema.graphql > schema.graphql

package.jsonにrelayのconfigとscriptを用意し実行する

// your-app-name/package.json
{
  ...
  "scripts": {
    ...
    "start": "yarn run relay && react-scripts start",
    "build": "yarn run relay && react-scripts build",
    "relay": "yarn run relay-compiler $@"
    ...
  },
  "relay": {
    "src": "./src/",
    "schema": "./schema.graphql"
  }
  ...
}

yarn start

ただしこれだとTypeScriptでは失敗する

[INFO] [default] compiling...
thread 'main' panicked at 'Expect GraphQLAsts to exist.', /Users/runner/work/relay/relay/compiler/crates/relay-compiler/src/compiler.rs:333:18
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
error Command failed with exit code 101.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 101.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 101.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: command finished with error: command (typescript/apps/moet) yarn run dev exited (101)

RelayではFlowがデフォルトになっているので、TypeScriptに言語指定する必要がある。
詳細はこちらのスクラップにて。

https://zenn.dev/takeharu/scraps/1e176bbdd1e519

HaruHaru

relay-runtimeの設定

公式ガイドのコードはJSなので、適宜TypeScript用に型を指定する

import {
  Environment,
  FetchFunction,
  Network,
  RecordSource,
  Store,
} from 'relay-runtime';
import fetchGraphQL from './fetchGraphQL';

const fetchRelay: FetchFunction = async (parameters, variables) => {
  console.log(`fetching query ${params.name} with ${JSON.stringify(variables)}`);
  return fetchGraphQL(params.text, variables);
}

export default new Environment({
  network: Network.create(fetchRelay),
  store: new Store(new RecordSource()),
});
HaruHaru

リクエスト処理

ガイド通りリクエストする際に、下記モジュールの型定義が解決されない。

import graphql from 'babel-plugin-relay/macro';

こちらは自身で定義。
例えば、create-react-appをしている場合は src/react-app-env.d.ts に記載するなど。
筆者はtypes配下に型定義ファイルをまとめていたので、 types/relay.d.ts のファイルを作成。

declare module 'babel-plugin-relay/macro' {
  export {graphql} from 'react-relay'
}

そのほかはガイド通りに進めれば、起動できるところまで進められる。

このスクラップは2023/01/23にクローズされました