TypeError：试图分配给只读属性。在 Expo / GraphQL Apollo 客户端上答案

【问题标题】：TypeError: Attempted to assign to readonly property. On Expo / GraphQL Apollo clientTypeError：试图分配给只读属性。在 Expo / GraphQL Apollo 客户端上
【发布时间】：2020-08-06 09:06:45
【问题描述】：

我遇到了 TypeError: Attempted to assign to readonly 属性。这是在带有 Apollo 客户端的 Expo / React Native 上。

我有以下 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": []
      }
    ]
  }

【问题讨论】：

标签： react-native graphql expo apollo mux

【解决方案1】：

我认为该问题与您访问muxPlaybackId 的方式无关。运行时似乎在抱怨 assigning 东西，而不是 accessing。

不过，可以肯定的是，不要使用表达式来访问muxPlaybackId，而是尝试对其进行硬编码，看看是否有同样的问题：

source={{ uri: "e6ZNh139bm2Poz5xoPl4V4016fnRCPWcZbkrTxg3Ocys" }}

如果这仍然产生错误，那么我会查看Video 组件并查看允许设置哪些属性。

【讨论】：