访问特定字段 graphql react答案

【问题标题】：acess specific field graphql react访问特定字段 graphql react
【发布时间】：2021-10-15 16:55:22
【问题描述】：

我的代码如下所示：

interface MutationProps {
    username: string;
    Mutation: any;
  }
  export const UseCustomMutation: React.FC<MutationProps> | any = (username: any, Mutation: DocumentNode ) => {
    const [functionForDoingAction, { data, loading, error }] = useMutation(
      Mutation,
      {
        variables: {
          username,
        },
      }
    );
  
    useEffect(() => {
      // fn trigger for change data
      functionForDoingAction({
        variables: {
          username: username,
        },
      });
      console.log(JSON.stringify(data));
      console.log(JSON.stringify(error, null, 2));
    }, []);
  
    if (loading) return "loading...";
  
    if (error) return `Submission error! ${error.message}`;
  
    return data;
  };
  export const DisplayUser = () => {
  const GET_USER = gql`
    mutation GetUser($username: String!) {
      getUser(username: $username) {
        pfp
        username
        password
        age
        CurrentLive
        ismod
        description
        fullname
      }
    }
  `;
  const { username }: { username: any } = useParams();
  const MyData = UseCustomMutation(username, GET_USER);
  console.log(JSON.stringify(MyData));

我想访问MyData.pfp，但它给了我这个错误：

TypeError: 无法读取未定义的属性“pfp”

如果我继续时很重要，例如localhost:3000/user/dakepake 变量 MyData 看起来像这样：

UserProfile.tsx:39 {"getUser":{"pfp":""https://i.pinimg.com/564x/65/25/a0/6525a08f1df98a2e3a545fe2ace4be47.jpg"","用户名":"" dakepake"","password":""mohikanac10"","age":14,"CurrentLive":"""","ismod":false,"description":""这个用户还没有个人简介"" ,"fullname":""damjan alimpic"","__typename":"GetUserResponse"}}

我该如何解决这个问题？

【问题讨论】：

我又添加了一些数据，现在好吗？ @RyanLe
能否粘贴console.log(JSON.stringify(MyData))的输出；
UserProfile.tsx:39 {"getUser":{"pfp":""i.pinimg.com/564x/65/25/a0/… 用户还没有个人简介"","fullname":""damjan alimpic"","__typename ":"GetUserResponse"}}

标签： javascript reactjs typescript graphql

【解决方案1】：

我自己解决了这个问题，我只是用 MyData.getUser.pfp 替换了 MyData.pfp，现在它可以工作了

【讨论】：