13

React-Apollo に次の GraphQL クエリがあるとします。

const CurrentUserForLayout = gql`
  query CurrentUserForLayout($avatarID: Int!) {
    currentUser {
      avatar_url(avatarID: $avatarID)
    }
  }
`;

const ProfileWithData = graphql(CurrentUserForLayout, {
  options: { variables: { avatarID: 1 } },
})(Profile);

ProfileReact コンポーネントに avatarID を変更させたい場合は、

どうすればいいですか？

私はReactとGraphQlを初めて使用し、ここでの接続をよく理解していません:

graphql(CurrentUserForLayout, {
      options: { variables: { avatarID: 1 } },
    })(Profile);

別の親コンポーネントをクエリProfileWithData に渡すために、別の親コンポーネントが本当に必要ですか? avatarIDしかし、ID が Profile コンポーネントによって操作されている場合、親コンポーネントにそれを知らせるにはどうすればよいでしょうか?

4

3 に答える 3

5

コンポーネントProfileWithDataは、特定のユーザーのアバターを適切にレンダリングします。現在表示されているアバター コンポーネントの変更を管理するのは、このコンポーネントの責任ではありません。

avatarId1 つの方法は、親コンポーネントから渡される新しい prop を追加することです。次に、これを書く必要があります：

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.avatarId
    }
  })
})(Profile);

に精通している場合はreact-router、ルート パラメータを使用してアバター ID を決定する別の方法があります。graphqlの呼び出しを次のように調整する必要があります。

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.params.avatarId
    }
  })
})(Profile);

このようなクエリ変数の使用法について詳しくは、Learn Apollo の React Track を参照してください。

于 2017-01-03T02:10:10.030 に答える