Reactを使用した状態で複数のApolloクエリを結合するにはどうすればよいですか？

debugcn 投稿 Dev

ペドロ

私はReactとApolloをMongoDBに適用したばかりで、次の問題があります。

（ID-ID_A-ID_B）があるテーブルがあります。これに対してクエリを実行し、配列を返します。その後、別のテーブルで、配列内の各コンポーネントについてID_Aとの一致を確認する必要があります。

だから私は作った：

{this.props.firstGet.map((data, index) => {
const id = data.ID_A;
return (
<Query key={this.props.firstGet.id} query={QUERY} variables={{ id }}>
   {({ loading, error, data }) => {
   if (loading) return 'Loading...';
   if (error) return `Error ${error.message}`;
   this.test = this.test.concat({...data.getStartup, ...this.state.applicants[index]});
   return(this.test.length === this.props.getApplicants.length ? 
   <LastTable startups={this.test}></LastTable>
   : '')
   }
   }
</Query>
);

私の問題のベストプラクティスはどれですか？2番目のテーブルの答えを持つ各オブジェクトのコンポジットを含む最初の配列が必要です。たとえば、LastTableを使用せずに、メイン状態に直接移行する方法はありますか？

解決方法：1）MainTable MongoDBスキーマの追加：

ID_A: {
    type: mongoose.Schema.ObjectId,
    ref: 'Table1'
}

2）graphQlでshcema：ID_A：Table1Object

3）リゾルバーに.populate（ 'ID_A'）を追加する

新しいものを挿入してみます。問題があるかもしれませんが、そのMainTable ID_AフィールドにIDがある場合、接続は正常に機能します。

WitVault

これはgraphqlサーバー側で処理できます。これらの依存フィールドを解決してサーバー側から返すように要求する必要があります。

たとえば-

フィールドとサブフィールドを持つ1.Createスキーマなど

 type Person {
 id: ID!
 cars: [Car]
}

type Car {
  id:ID!
  ownerId: Int!
  model: String
}

2.サーバー側でネストされたリゾルバーを作成する必要があります

パーソンリゾルバ：

import Query from './query';
import Mutation from './mutation';

export default {
  Query,       //<----- person query resolver 
  Mutation,    //<----- person mutation resolver if any
  Person: { .  //<----- Nested fields resolver on Person
   cars: (parent, args, { dataSources }) => {
      const { id: ownerId } = parent;
      // return from db cars owned by person
      return dataSources.carAPI.getCarsByOwnerId(ownerId);
    },
  },
};

ここではdataSourceを使用していますが、データベースから直接解決を使用できます。

3.クライアント側でのクエリ

 export const GET_PERSON_WITH_CARS = gql`
  query getPersonWithCars($id: ID!) {
   person(id: $id) {
      id
      cars {
        id,
        ownerId,
        model,
     }
  }
`

お役に立てば幸いです

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]