如何使用不同的字段生成相同的graphql查詢

Question

我正在使用graphql-tag所以我將使用該語法。

假設我有這個查詢：

const query = gql`
 query user(id: String) {
  user(id: $id) {
   id
  }
 }
`

如果在不同的調用中重用相同的查詢文檔節點的最佳模式是什么，除了id之外，我還需要字段username和email ，而不必再次重寫整個查詢，例如：

const query = gql`
 query user(id: String) {
  user(id: $id) {
   id
   username
   email
  }
 }
`

如果這讓事情變得更有趣，我會在前端使用react-apollo 。

編輯：

只是為了澄清......像這樣的事情

const userIdFrag = gql`
  fragment UserId on User {
    id
  }
`

const fullUserFrag = gql`
  fragment FullUser on User {
    id
    username
    email
  }
`

const generateQuery = (documentNode) => {
  return gql`
   query user(id: String) {
      user(id: $id) {
       ...documentNode
      }
     }
     ${documentNode}
  `
}

const idQuery = generateQuery(userIdFrag);
const fullUserQuery = generateQuery(fullUserFrag);

（以上確實有效，但在控制台中給了我來自 graphql 的錯誤，這讓我相信這不是我應該做的事情）

Answer 1

根據您的評論，以下內容應該有效：

const generateQuery = (documentNode, fragment) => {
  return gql`
   query user(id: String) {
      user(id: $id) {
       ...${fragment}
      }
     }
     ${documentNode}
  `
}

const idQuery = generateQuery(userIdFrag, 'UserId');
const fullUserQuery = generateQuery(fullUserFrag, 'FullUser');

基本上使用的片段名稱是需要傳播的實際名稱，而整個 documentNode 對象放在最后，在查詢的右括號之后

Answer 2

我不是該主題的專家，但這是我能夠找到的。 （如果您發現我的假設有任何錯誤，請告訴我）。

我發現這篇文章對動態生成gql查詢/突變提出了一些好處。 使用靜態方法似乎可以獲得一些不錯的好處，盡管它需要更多的輸入。

但是，如果您確實需要擁有動態字段，我無法發現使用 GraphQL 提供的@skip指令有什么不好的@skip 。 這里的文檔參考。

對於在react-apollo中使用它的情況， 他們也在他們的 docs 中有它。

因此，您的代碼最終可能看起來像這樣：

const query = gql`
 query user($id: String, $skipUserMeta: Boolean!) {
  user(id: $id) {
   id
   username @skip(if: $skipUserMeta)
   email @skip(if: $skipUserMeta)
  }
 }
`

您只需將skipUserMeta作為變量與id字段一起傳遞。

注意：我實際上找到了一個視頻，其中討論了完全相同的方法here