Question

这是我用于获取用户详细信息的示例graphql查询（我在reactJS中使用Apollo客户端）

如果我只需要 id 和 name 作为响应，则可以使用此查询

{
 getUserDetails {
   id
   name
 }
}

或者如果我只需要 id 和 userType ，我会使用以下查询：

{
 getUserDetails {
   id
   userType
 }
}

有什么方法可以动态地传递字段名称和用户类型（基本上动态地传递字段），而不是再次编写整个查询吗？

Answer 1

您可以在运行时构建查询，但是通常建议不要这样做（由于我不想在这里介绍）。相反，GraphQL附带了其他解决方案：

通常GraphQL与React一起很好地工作，并且以类似的方式组成。 GraphQL带有片段，可以帮助编写查询。片段相当于React中的组件。如果您有两个不同的React组件，最好写两个查询。我认为没有理由重复使用查询。

然后有界面/工会。因此，也许您有一个页面想要在其中显示用户，并根据您是否与该用户成为朋友来显示不同的内容：

{
  getUserDetails {
    id
    name
    ...on UserFriend {
      friendsSince
    }
    ...on UserStranger {
      numberCommonFriends
    }
  }
}

如果不是这种情况，并且您确实有一个依赖于某种输入的具有不同数据依赖关系的组件，请不要担心过度提取。当然GraphQL声称摆脱了过度获取，但是您的示例似乎微不足道，以至于我不会为此引入复杂性。

好的，所以您说您的问题只是一个例子！如果在设置了某个标志的情况下想要有条件地加载一些昂贵的字段怎么办？然后，您可以使用directives：


const MyComponentQuery = gql`
  query MyComponentQuery($versionA: Boolean!) {
    {
      getUserDetails {
        id
        name @inlude(if: $versionA)
        userType @skip(if: $versionA)
      }
    }
  }
`;

function MyComponent(props) {
  const { data, loading, error } = useQuery(MyComponentQuery, {
    variables: { versionA: props.versionA },
  });

  return //...
}

在ReactJS中使用动态字段的Apollo客户端graphql查询

1 个答案: