javascript - 动态构建中继查询

Question

我使用 Relay Modern 作为我的客户端 GraphQL 接口(interface)。我想知道是否可以在 Relay Modern 中动态构建我的查询语句，例如更改原始语句:

const ComponentQuery = graphql`
    query ComponentQuery ($companyId: ID!) {
        viewer {
            company(id: $companyId) {
                id
                name
                enabled
                users {
                    id
                    username
                    email
                    firstName
                    lastName
                    jobTitle
                    phone
                }
            }
        }
    }
`;

至以下内容:

let queryFields = ['name', 'enabled'];
let userFields = ['username', 'email', 'firstName', 'lastName', 'jobTitle', 'phone' ];


const ComponentQuery = graphql`
    query ComponentQuery ($companyId: ID!) {
        viewer {
            company(id: $companyId) {
                id
                queryFields
                name
                enabled
                users {
                    id
                    userFields
                }
            }
        }
    }
`;

当然，由于 GraphQL 架构是静态的，因此字段必须全部存在于 GraphQL 架构中。我想要的只是动态构建查询，而不是动态 GraphQL 架构。

Answer 1

虽然不可能像您在第二个示例中概述的那样以无限制的方式动态制作查询，但您可以使用 @include 和 @skip 指令做出固定数量的选择。

在片段级别:

query ComponentQuery(
  $companyId: ID!,
  $showUserDetails: Boolean!,
) {
  viewer {
    company(id: $companyId) {
      id
      name
      enabled
      users {
        id
        firstName
        lastName
        ... on User @include(if: $showUserDetails) {
          email
          jobTitle
          phone
          username
        }
      }
    }
  }
}

在现场级别:

query ComponentQuery(
  $companyId: ID!,
  $showUserContactDetails: Boolean!,
  $showUserRealName: Boolean!,
  $showUserRole: Boolean!,
  $showUserUnixname: Boolean!,
) {
  viewer {
    company(id: $companyId) {
      id
      name
      enabled
      users {
        id
        firstName @include(if: $showUserRealName)
        lastName @include(if: $showUserRealName)
        username @include(if: $showUserUnixname)
        email @include(if: $showUserContactDetails)
        jobTitle @include(if: $showUserRole)
        phone @include(if: $showUserContactDetails)
      }
    }
  }
}