CODEWITHSUNDEEP
graphqlreact-apollo
Kaiser Soze
Kaiser Soze

Reputation: 1498

Graphql query and Apollo

I am using Apollo with React Native and I am doing a query to get the user data having his id, that is stored as prop. This is the query: 

const GET_USER_DATA = gql`
 query User($id: ID!) {
  User(id: $id) {
   id
   name
  }
 }`;

then this code

const User = ({ userId }) => {
console.log("User id: ", userId);
 return (
   <Query query={GET_USER_DATA} variables={{ userId }}>
     {({ loading, error, data }) => {
      if (loading) return <Text>Loading ...</Text>;
      if (error) return <Text>Error!: {error}</Text>;
       return (
       <Text>Text: {data}</Text>
     );
    }}
  </Query>
 );
 }

and then, if the props exists I add this :

 <User userId={this.props.data.loggedInUser.id} />

To show the view. But I get this error 

Error: GraphQL error: Variable '$id' expected value of type 'ID!' but 
value is undefined. Reason: Expected non-null value, found null.

I am checking that the userId has a value and the value is printed, i can see it. What am I doing wrong?

Upvotes: 0

Views: 185

Answers (1)

Marco Daniel
Marco Daniel

Reputation: 5765

Have you tried changing the variable name from userId into id?

Something like:

const User = ({ id}) => {
console.log("User id: ", id);
 return (
   <Query query={GET_USER_DATA} variables={{ id }}>
     {({ loading, error, data }) => {
      if (loading) return <Text>Loading ...</Text>;
      if (error) return <Text>Error!: {error}</Text>;
       return (
       <Text>Text: {data}</Text>
     );
    }}
  </Query>
 );
 }

and then:

<User id={this.props.data.loggedInUser.id} />

OR

assign the userId variable into the id param like:

const User = ({ userId }) => {
console.log("User id: ", userId);
 return (
   <Query query={GET_USER_DATA} variables={{ id: userId }}>
     {({ loading, error, data }) => {
      if (loading) return <Text>Loading ...</Text>;
      if (error) return <Text>Error!: {error}</Text>;
       return (
       <Text>Text: {data}</Text>
     );
    }}
  </Query>
 );
 }

Upvotes: 2

Related Questions