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

Question

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

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

{
 getUserDetails {
   id
   name
 }
}

或者如果我只需要 id 和 userType 我使用这个查询：

{
 getUserDetails {
   id
   userType
 }
}

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

Answer 1

您可以在运行时构建一个查询，但通常不建议这样做（出于我不想进入此处的原因）。相反，GraphQL 带有其他解决问题的方法：

通常，GraphQL 与 React 配合得很好，并且以类似的方式组合。 GraphQL 带有片段可以帮助编写查询。 Fragments 相当于 React 中的组件。如果你有两个不同的 React 组件，那么写两个查询应该没问题。我认为没有理由重用查询。

然后还有interfaces/unions。因此，也许您有一个要向用户展示的页面，并且根据您是否是您想要展示不同内容的用户的朋友：

{
  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 查询

Apollo client graphql query with dynamic fields in reactJS

reactjs

graphql

react-apollo

apollo-client

graphql-js