問題タブ [react-router-relay]

ログイン用のミューテーションを実装しようとしています。ミューテーションは、提供された id_token を検証し、セッション経由でユーザーをログインさせます。ミューテーション自体は機能しますが (GraphiQL で検証済み)、Relay との統合に問題があります。

ユーザーがログインすると、「viewer」がルート クエリであるため、Relay ストア全体が変更される可能性があります。しかし、クエリ ツリー全体を太いクエリにリストしたくありません。どうにかしてストア全体をクリアできるといいのですが、 でそれを行う方法がわかりませんreact-router-relay。

リレー突然変異:

使用法：

GraphQL スキーマ:

私のルートの一部は次のように設定されています：

ただし、次のエラーが表示されます。

ルートのクエリは:widgetId有効ですか? 最上位ルートからビューアーを削除すると、すべてが機能します。

編集:詳細フラグメントは次のとおりです。

編集：ウィジェットフラグメントは次のとおりです。

注: isomorphic-relay-router を使用しています

react-router-relayパッケージを使用して、次のルーターとルートを持っています

GraphQL からの私の StoreType は次のようになります。user フィールドは、null 以外の整数を表す id 引数を受け入れます。

user/:userIdルートのリレー コンテナ:

ブラウザーで /user/1 にアクセスすると、react-router-relay は:userId整数ではなくルートからの文字列として扱い、GraphQL は JSON エンコードされたエラー メッセージを返します。"Argument \"id\" has invalid value \"1\".\nExpected type \"Int\", found \"1\"."

URL で渡された userId 引数を整数にキャストする方法はありますか? または、整形式の数値文字列と整数をサポートするカスタム GraphQL スカラー型はありますか? これに関するご意見やご指示をいただければ幸いです。

プロジェクトでreact-router-relayを使用しています。すべてのコンポーネントが基本的にルート クエリと同じ名前のフラグメントで終わることを考えると、この設計は私には不適切に思えます。各コンポーネントは、ルート クエリの下に任意のタイプの一意の名前のフラグメントを持つことができるべきではありませんか? このパッケージを使用してこれは可能ですか、それとも私の考えに欠陥がありますか?

編集：おそらく私の質問は少し曖昧でした。私の問題は、react-router-relay によって定義された query 属性に基本的に 2 つのルールがあり、奇妙なデザイン パターンと思われるものを強制することです。これらの 2 つのルールは次のとおりです。

1. 各クエリは「1 レベル」の深さまでしか進められません。
2. 各クエリは、それを使用するコンポーネントで同じ名前のフラグメントにマップする必要があります。

これにより、次のいずれかのシナリオが残ります。

1. すべてのコンポーネントに同じ「ビューア」クエリを使用し、各コンポーネントで補完的な「ビューア」フラグメントを定義します。これらのフラグメントは、同じ名前を持っているにもかかわらず、すべて異なるデータ要件を定義するため、非常に紛らわしいようです。
2. さまざまなコンポーネントに一意のフラグメント名を作成し、フェッチするデータの種類に応じて異なる名前でまったく同じルート クエリを繰り返しますが、これはまったくばかげているように思えます。

これは基本的な考え方のように思えますが、頭を包むことができないようです。

Redux では、ストアに何が起こるか、どの props をコンポーネントに渡すかを定義するのは完全に私次第です。Relay ではrender、準備完了状態に基づいてコンポーネントを返すコンテナー内の関数を定義できます。私が本当に欲しいのは、次のようになります。

次に、どのコンポーネントでも：

..しかし、もちろん、私は redux とリレーを混在させていません。まさにこれを行う「リレー方法」があると思います。

私のnodejsアプリケーションで

ここに私のschema.jsファイルがあります

以下は私のdatabase.jsです

私はユーザーを取得しています

ユーザーと一緒にすべての投稿を取得したい

しかし、ターミナルで以下のエラーが発生しています

助けてください。前もって感謝します。

アプリで react-router を v2.6 に、react-router-relay を v0.7 に更新しようとしていますが、変更ログに従ってすべての重大な変更に対処するのに苦労しています。すべての変更に対処したと思いますが、まだ機能させることができません。

警告: [react-router] ロケーション "/" はどのルートとも一致しませんでした

これは、変更に対処するために私が行ったことの段階的なガイドです。まず、npm モジュールを更新しました。

すべてが機能した以前のpackage.json：

エラーが発生している新しいpackage.json：

history モジュールは、react-router の直接の依存関係になったため、削除しました。最新のモジュールをインストールしたら、ページをリロードすると、次のエラーが発生しました。

エラー 1:

警告: [react-router] 非推奨の履歴オブジェクトを<Router/>に提供したようです。React Router が提供する履歴をimport { browserHistory } from 'react-router'またはで使用してくださいimport { hashHistory } from 'react-router'。カスタム履歴を使用している場合は、で作成してください。詳細についてはuseRouterHistory、https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-history-with-routerを参照してください。 .

エラー 2:

警告: 失敗したコンテキスト タイプ:relayに指定されたprop/context が無効Relay(App)です。インターフェイスundefinedに準拠するオブジェクトである必要があります。RelayEnvironment

エラー 3:

警告: 失敗したコンテキスト タイプ: 必要なコンテキストrouteが で指定されていませんRelay(App)。

エラー 4:

Uncaught Invariant Violation: RelayContainer:Relay(App)無効な Relay context でレンダリングされましたundefined。relayReact コンテキストのプロパティがRelayEnvironmentインターフェイスに準拠していることを確認してください。

最初のエラーは、react-router のアップグレード ガイドへの便利なリンクを示しているので、それに従い、それに応じて app.js ファイルを更新しました。

私の変更前は、次のように見えました。

試行 1

2.x への更新ガイドを使用して、次のようなカスタム履歴を使用するように app.js ファイルを変更しました。

これにより、ブラウザに次のエラーが表示されます。

エラー 5

警告: [react-router] ロケーション "/" はどのルートとも一致しませんでした

それが私が望む解決策だと思います..しかし、確信が持てなかったので、ブラウザ (HTML5 pushState) 履歴の方法も試して、次の変更を試みました:

試行 2

これをロードすると、エラー 2、3、および 4 が返されます。試行 1 が正しいアプローチだと思いますが、このエラーの意味がわからず、グーグルで検索すると、たくさんの回答が得られました ( 1、2、リンク先に3およびIndexRoute を使用した4も)、試してみましたが、どれもうまくいきませんでした。

参考までに、私の App.js ファイルは次のようになります。

これが理由であるかどうかは 100% わかりませんが、react-router v2.0.0-rc6 に重大な変更があり、最上位の Router エクスポートが削除されたことは知っていますが、それが私にとって何を意味するのか本当にわかりませんか? ルーターはもう使えないのでしょうか？もしそうなら、私は代わりに何をすべきですか？

数日間の調査と試行錯誤の後、私はあきらめて、ここの誰かが助けてくれることを願っています. 正しい方向へのポインタは大歓迎です。