慕雪6442864
2023-06-09 15:28:55
我使用 Apollo 從 GraphQL 獲取數據。當我嘗試從中記錄數據時,useQuery我首先得到兩個未定義的日志,第二個是帶有 gql 數據的日志。當我試圖從例如data.flats.titlereact 獲取數據時,我有未定義的信息,所以它是來自 first 的信息console.log()。我如何獲取數據并顯示它?控制臺屏幕:import React from "react";import { gql, useQuery } from "@apollo/client";const myQuery = gql` query { flats { Title } }`;const Test = () => { const { data } = useQuery(myQuery); console.log(data); return <h2>GQL TEST</h2>;};export default Test;
1 回答

收到一只叮咚
TA貢獻1821條經驗 獲得超5個贊
似乎您需要一個簡單的null
或undefined
檢查來正確表示您的數據。您可以使用三元運算符或&&
檢查。
基于此,您可以在組件中執行&&
以下操作:
const Test = () => {
? const { data } = useQuery(myQuery)
? return <>
? ? <h2>GQL TEST</h2>
? ? {data && data.flats && <span>data.flats.title</span>}
? </>
}
或者使用三元運算符:
const Test = () => {
? const { data } = useQuery(myQuery)
? return <>
? ? <h2>GQL TEST</h2>
? ? {data && data.flats ? <span>data.flats.title</span> : null}
? </>
}
僅從命名data.flats我可以假設它可以是一個數組,您需要像我上面建議的那樣使用類似的方式.map():
{data && data.flats && data.flats.map(e => <span>e.title</span>)}
添加回答
舉報
0/150
提交
取消