TypeError.试图分配给readonly属性。试图分配给readonly属性。在Expo GraphQL Apollo客户端上

Question

我遇到一个TypeError。试图分配给readonly属性。这是在Expo React Native和Apollo客户端上发生的。

我有以下GraphQL查询

const GET_VIDEOS = gql`
    {
      users(limit: 3) {
        userVideos {
          muxPlaybackId
          videoQuestion {
            questionText
          }
        }
      }
    }
    `; 

我创建了以下组件。

export const VideoData = (ref) => {
    const { data, error, loading } = useQuery(GET_VIDEOS); 

    if (loading) return null;
    if (error) return `Error!: ${error}`;

    console.log(data);

    return (<Video
            ref={ref}
            source={{ uri: data.users[0].userVideos[0].muxPlaybackId}}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            usePoster={true}
            shouldPlay
            isLooping
            style={{ width: '100%', height: '100%'}}
        >
        </Video>
    );
}

问题似乎来自于下面这一行:

source={{ uri: data.users[0].userVideos[0].muxPlaybackId}}

但我还能怎样访问这个muxPlaybackId字符串？这是我对视频源唯一需要的值。

为了完整起见，这是我的GraphQL结果。

{
  "data": {
    "users": [
      {
        "userVideos": [
          {
            "muxPlaybackId": "e6ZNh139bm2Poz5xoPl4V4016fnRCPWcZbkrTxg3Ocys",
            "videoQuestion": {
              "questionText": "What do you miss most about normal life?"
            }
          },
          {
            "muxPlaybackId": "DeygMKplfbg4Ye6PtCiFDgMFI01AEBp1tnfoVD9k401Ws",
            "videoQuestion": {
              "questionText": "What is your favorite color?"
            }
          }
        ]
      },
      {
        "userVideos": []
      },
      {
        "userVideos": []
      }
    ]
  }

Answer 1

我不认为这个问题与你如何访问这个属性有关。muxPlaybackId. 运行时似乎在抱怨 指派 不是 访问.

但可以肯定的是，与其使用表达式来访问 muxPlaybackId试试硬编码，看看是否有同样的问题。

source={{ uri: "e6ZNh139bm2Poz5xoPl4V4016fnRCPWcZbkrTxg3Ocys" }}

如果这仍然会产生错误，那么我会看一看 Video 组件，看看你可以设置哪些属性。