Graphql 突變查詢：如何訪問數據元素

Question

 const MUTATION_QUERY = gql`
  mutation MUTATION_QUERY(
    $name: bigint!
  ) {
    insert_name(
      objects: {
        name: $name
      }
    ) {
      returning {
        id
        name
      }
    }
  }
`;


const [onClick, { error, data }] = useMutation<{}, {}>(MUTATION_QUERY, {
        variables: {
          name: 1234,
        },
      });

我的變異查詢正在我的表中插入名稱並自動生成 id。 在控制台記錄數據變量時，我可以查看數據對象中的字段 id 和 name。 但我無法單獨訪問它們。 我怎樣才能 console.log “id”。 謝謝你。

console.log(data) 看起來像： {insert_name: {...}}

擴展為：

insert_name: 
 returning: Array(1) 
   0: {id: 1, name: 1234} 
   length: 1 
   _proto_: Array(0) 
 _typename: "insert_name_mutation_response

Answer 1

您可以使用 訪問對象的字段.

例如，如果您的對象看起來像這樣 -

data = {
  id: 1,
  name: 'Jane',
}

您可以使用data.id僅獲取 id

無論您的對象有多少層深度，這都有效，因此以這個例子為例 -

data = {
  person: {
    id: 1,
    name: 'Jane',
  }
}

您可以通過data.person.id獲取人員的 id。

Answer 2

console.log(data.insert_name.returning[0].id)會給你返回的id。

為了讓它在打字稿中工作，我們需要更改查詢以添加數據的返回類型

const [onClick, { error, data }] = useMutation<{ReturnInsertNameProps}, {}>(MUTATION_QUERY, {
        variables: {
          name: 1234,
        },
      });

interface ReturnInsertNameProps {
  insert_name: ReturnQueryProps;
}

interface ReturnProps {
  returning: MessageProps[];
}

interface NameProps {
  id: number;
  name: number;
}

Answer 3

如果我們想處理查詢的結果，我們也可以使用 useMutation 中提供的 onCompleted 方法。