Доступ к полю id возвращаемого объекта запроса изменяет его на неопределенный - PullRequest
Новая
       14

Доступ к полю id возвращаемого объекта запроса изменяет его на неопределенный

0 голосов
/ 03 декабря 2018

Я работаю над веб-приложением реагировать / mondgodb / graphql / apollo.У меня есть запрос, настроенный для получения члена, использующего fbid (это идентификатор firebase, который я вставляю как fbid, чтобы найти зарегистрированный профиль участника в моей базе данных по идентификатору firebase).Когда я делаю запрос, я могу console.log, чтобы запрос возвращал данные в целом.Если я пытаюсь получить доступ к членам данных, я получаю, что объект не определен.Вот компонент, к которому я обращаюсь: 

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom'
import { graphql, compose } from 'react-apollo';
import { withFirebase } from '../Firebase';
import { getMemberByFBidQuery } from '../../queries/queries';

import DataList from '../wishes/MyDataList';

const INITIAL_STATE = {
    memberProfile: {},
    error: null
}

class DashboardGuts extends Component {
    constructor(props) {
        super(props);

        this.state = { ...INITIAL_STATE };
    }

    render() {
        const memberProfile = this.props.getMemberByFBidQuery.memberByFBid;
        console.log('memberProfile: ', memberProfile.id);

        return (
            <div className="dashboard container">
                <div className="row">
                    <div className="col s12 m6">
                        <h4>My Data List</h4>
                        <DataList memberProfile={memberProfile} />
                    </div>
                </div>
            </div>
        )
    }
}

const Dashboard = withFirebase(DashboardGuts)

export default compose(
    graphql(getMemberByFBidQuery, {
        name: "getMemberByFBidQuery",
        options: (props) => {
            return {
                variables: {
                    fbid: props.firebase.auth.O
                }
            }
        }
    }),
)(Dashboard)

Когда я console.log memberProfile в приведенном выше коде, я получаю все данные, которые я ожидаю, возвращенные из запроса.Вывод console.log выглядит следующим образом: 

memberProfile:  
    {firstname: "jo", lastname: "blo", id: "1234", 
     fbid: "5678", __typename: "Member"}
     fbid: "5678"
     firstname: "jo"
     id: "1234"
     lastname: "smith"
     __typename: "Member"
     __proto__: Object
 }

Проблема заключается в том, что при попытке получить доступ к любому из полей в объекте memberProfile - например, id - я получаю ошибки.Например, если я изменю эту строку: 

console.log('memberProfile: ', memberProfile);

На это: 

console.log('memberProfile: ', memberProfile.id);

Тогда я получаю ошибку, что не могу получить доступ к идентификатору неопределенного объекта.enter image description here

Есть идеи, как получить доступ к этому свойству id?Если это помогает, вот фактический запрос graphQL: 

const getMemberByFBidQuery = gql`
query($fbid: String){
    memberByFBid(fbid: $fbid) {
        firstname,
        lastname,
        id,
        fbid
    }
}

`

А вот схема для этого запроса: 

memberByFBid: {
        type: MemberType,
        args: { fbid: { type: GraphQLString } },
        resolve(parent, args) {
            return Member.findOne({ fbid: args.fbid });
        }
    },

А вот схемадля MemberType: 

const MemberType = new GraphQLObjectType({
name: "Member",
fields: () => ({
    id: { type: GraphQLID },
    firstname: { type: GraphQLString },
    lastname: { type: GraphQLString },
    email: { type: GraphQLString },
    fbid: { type: GraphQLString },
    wishes: {
        type: GraphQLList(WishType),
        resolve(parent, args) {
            return Wish.find({ memberId: parent.id })
        }
    },
    groups: {
        type: GraphQLList(MemberToGroupMapType),
        resolve(parent, args) {
            return MemberToGroupMap.find({ memberId: parent.id });
        }
    }
})
});

Заранее благодарен за любую помощь!

Согласно советам TLadd, я изменил свою функцию рендеринга, но я все еще получаю ошибку.Сейчас она: 

render() {
    console.log('look for loading: ', this.props);
    const { memberByFBid, loading, error } = this.props.getMemberByFBidQuery;

    if (loading) {
        return (<p>Loading...</p>);
    } else if (error) {
        return (<p>Error!</p>);
    }

    console.log('memberProfilexx: ', memberByFBid);

    return (
        <div className="dashboard container">
            <div className="row">
                <div className="col s12 m6">
                    <h4>My Wish List</h4>
                    <WishList memberProfile={memberByFBid} />
                </div>
                <div className="col s12 m5 offset-m1">
                    <div>Hello</div>
                </div>
            </div>
        </div>
    )
}

Но я все равно получаю сообщение об ошибке, если пытаюсь использовать console.log memberByFBid.id вместо memberByFBid.

1 Ответ

0 голосов
/ 03 декабря 2018

Вы попали в эту ошибку, потому что ваш запрос еще не загружен, когда ваш компонент DashboardGuts впервые пытается выполнить рендеринг.Из response-apollo docs о свойстве data (в данном случае getMemberByFBidQuery, так как вы указываете настраиваемую опцию конфигурации имени в графическом HOC):

Обязательно всегда проверяйтеdata.loading и data.error в ваших компонентах перед рендерингом.Такие свойства, как data.todos, которые содержат данные вашего приложения, могут быть неопределенными, пока ваш компонент выполняет начальную выборку.Проверка data.loading и data.error поможет вам избежать проблем с неопределенными данными.

Следуя этому совету, ваш метод рендеринга станет примерно таким: 

render() {
  const { memberByFBid, loading, error } = this.props.getMemberByFBidQuery;

  if (loading) {
    return <p>Loading...</p>;
  } else if (error) {
    return <p>Error!</p>;
  }

  console.log('memberProfile: ', memberProfile.id);
  return (
    <div className="dashboard container">
      <div className="row">
        <div className="col s12 m6">
          <h4>My Data List</h4>
          <DataList memberProfile={memberProfile} />
        </div>
      </div>
    </div>
  )
}

Возможно, вы захотитеобрабатывать состояние загрузки / ошибки более привлекательным способом, но основная идея заключается в том, что вам необходимо учитывать данные, которые еще не загружены в методе рендеринга, поскольку они не будут присутствовать при начальном рендеринге.

...