問題タブ [react-apollo]

I have both the getMovies query and addMovie mutation working. When addMovie happens though, I'm wondering how to best update the list of movies in "Edit Movies" and "My Profile" to reflect the changes. I just need a general/high-level overview, or even just the name of a concept if it's simple, on how to make this happen.

My initial thought was just to hold all of the movies in my Redux store. When the mutation finishes, it should return the newly added movie, which I can concatenate to the movies of my store.

After "Add Movie", it would pop back to the "Edit Movies" screen where you should be able to see the newly added movie, then if you go back to "My Profile", it'd be there too.

Is there a better way to do this than holding it all in my own Redux store? Is there any Apollo magic I don't know about that could possibly handle this update for me?

EDIT: I discovered the idea of updateQueries: http://dev.apollodata.com/react/cache-updates.html#updateQueries I think this is what I want (please let me know if this is not the right approach). This seems better than the traditional way of using my own Redux store.

After addMovie mutation, this properly updates the view in "My Profile" because it uses the getMovies query (woah)! I'm then passing these movies as props into "Edit Movies", so how do I update it there as well? Should I just have them both use the getMovies query? Is there a way to pull the new result of getMovies out of the store, so I can reuse it on "Edit Movies" without doing the query again?

EDIT2: Wrapping MyProfile and EditMovies both with getMovies query container seems to work fine. After addMovie, it's updated in both places due to updateQueries on getMovies. It's fast too. I think it's being cached?

It all works, so I guess this just becomes a question of: Was this the best approach?

GitHunt-React と GitHunt-API で Apollo pub-sub を勉強しています。これらのアプリを実行して新しいコメントを入力すると、submit の呼び出しによってコメントが保存され、updateQueries コードブロックが次の場所で実行されます。

このコードをアプリに複製しました。ミューテーションは正しく保存されますが、updateQueries コード ブロックは実行されません。

updateQueries 呼び出しが実行されないのはなぜですか? 情報をお寄せいただきありがとうございます。

更新:リクエストごとに、ここに CREATE_IM_MUTATION のコードがあります:

更新: Slack の @fabio_oliveira のリクエストにより、更新中のクエリは次のとおりです。

私はこのようなデータを取得するこの残りのアプリを持っています.redux用のthunk + promiseミドルウェアがあります:

これからのデータはストアに入り、コンポーネントはそこからフェッチされたデータを使用します。

「ペイロード」の残りのリクエストをgraphqlクエリなどと交換できますか?

私を混乱させているのは、Redux が「データはストアに存在し、アクションによってのみ変更できる」と言っていることですが、Apollo はデータをコンポーネントに直接バインドします。私はすでに GraphQL API を作成しており、graphiql devtool でうまく機能しますが、この記事を読んだ後、クライアントでの処理方法に少し混乱しています。

apollo-clientクエリでラップされた react コンポーネントは、サーバーへのデータ呼び出しを自動的に開始します。

特定のユーザー入力に対してのみデータのリクエストを開始したいと考えています。

クエリ オプションでスキップ オプションを渡すことができますが、これは refetch() 関数がコンポーネントの小道具として提供されていないことを意味します。また、小道具の更新時にスキップの値が動的に評価されないようです。

私の用途は、マップ コンポーネントです。ユーザーがボタンを押したときにのみマーカーのデータをロードしたいのですが、最初のコンポーネントのマウントや場所の変更ではロードしません。

以下のコードサンプル:

私は2つの画面を持っています:

Screen1: 結果

Screen2: フィルターの編集

Screen2 でフィルターを編集して戻ると、Screen1 で (新しく作成されたフィルター文字列変数を使用して) クエリを再取得したいと思います。フィルターの編集では、ミューテーションを使用したり、Redux アクションを起動したりしません (ユーザーの検索フィルター/設定をデータベースではなく localStorage/AsyncStorage に保存しているため、ミューテーションはありません)。フォームのローカル状態を変更し、それを使用して、Screen1 の特定のクエリに渡すフィルター文字列を作成するだけです。それが役立つ場合は、両方の画面でフィルター文字列にアクセスできます。

クエリがhttp://dev.apollodata.com/react/recoming-updates.html#Refetchrefetch()をラップするコンポーネントに限定されているようですが、別の画面からクエリを再実行するにはどうすればよいですか?

Screen1 と Screen2 の両方に同じクエリを配置してから、Screen2 で再取得を呼び出してみました。クエリは機能し、Screen2 で新しいデータを取得しますが、実際に必要な Screen1 で同じ名前のクエリが更新されません。同姓同名ならいいんじゃないの？(ただし、filters 変数は変更されました)

これを間違って設計しているだけで、より簡単な方法がある場合は、お知らせください。2 つの画面があり、両方に同じクエリを配置し、新しいフィルター変数を使用してクエリの 1 つを再フェッチすると、両方の場所で再フェッチが発生するはずですが、現在は個別に処理されています。

私は次のような突然変異を持っています

別の場所に要素のリストがあります。

サーバーから返すことができるより良いものはありますか?リストを更新するにはどうすればよいですか?

より一般的には、apollo/graphql で削除を処理するためのベスト プラクティスは何ですか?

React-Storybooks で React-Apollo を使用する方法はありますか? 以前は Relay を試していましたが、ネットワーク アクセスを必要とせず、静的データを使用するスタブ コンテナーを作成できるモジュール ( https://github.com/orta/react-storybooks-relay-container ) があります。

React-Apollo フレームワークに相当するものはありますか? http://dev.apollodata.com/react/

FWIW 私は React-Native を使用していますが、すべての背後にあるアイデアとセットアップは非常に似ているはずです (たとえば、Web ベースのソリューションの代わりにhttps://github.com/storybooks/react-native-storybookを使用しています)