eslint error "data is missing in props validation" in apollo react app

Question

Not sure I understand what this eslint error is asking me to do. I'm using the apollo client demo code and it doesn't seem to like "data" in function PostList({ data: { loading, posts } }) {

Should I be doing something else to follow the airbnb eslint rules or should I be ignoring it?

import React from 'react';
import { Text, View } from 'react-native';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const styles = {
  outer: { paddingTop: 22 },
  wrapper: { height: 45, flex: 1, flexDirection: 'row' },
  header: { fontSize: 20 },
  subtextWrapper: { flex: 1, flexDirection: 'row' },
  votes: { color: '#999' },
}

// The data prop, which is provided by the wrapper below contains,
// a `loading` key while the query is in flight and posts when ready
function PostList({ data: { loading, posts } }) {
  if (loading) {
    return <Text style={styles.outer}>Loading</Text>;
  } else {
    return (
      <View style={styles.outer}>
        {posts.sort((x, y) => y.votes - x.votes).map(post => (
          <View key={post.id} style={styles.wrapper}>
            <View>
              <Text style={styles.header}>{post.title}</Text>
              <View style={styles.subtextWrapper}>
              <Text>
                by {post.author.firstName} {' '}
                {post.author.lastName} {' '}
              </Text>
              <Text style={styles.votes}>{post.votes} votes</Text>
              </View>
            </View>
          </View>
        ))}
      </View>
    );
  }
}

// The `graphql` wrapper executes a GraphQL query and makes the results
// available on the `data` prop of the wrapped component (PostList here)
export default graphql(gql`
  query allPosts {
    posts {
      id
      title
      votes
      author {
        id
        firstName
        lastName
      }
    }
  }
`)(PostList);

score 1 · Accepted Answer · answered Nov 15 '16 at 23:18

1

You have to add proptypes to your file:

PostList.propTypes = {
  data: React.PropTypes.object,
};

Add this below your PostList function. PropTypes are a way to validate data types passed to components in your React app.

The AirBnB linter goes as far as ensuring this as best practice.

answered Nov 15 '16 at 23:18

Toby

12,743
8
43
75

now another lint error - it says prop type object is forbidden – MonkeyBonkey Nov 15 '16 at 23:22
you can use `React.PropTypes.any` and it will pass validation. However, the idea is that whatever you are passing is what you declare as the PropType. – Toby Nov 15 '16 at 23:26
Also, check this [link](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) for more info about forbidden prop types - this would depend upon your specific linter configuration. – Toby Nov 15 '16 at 23:28
hmm it doesn't like any either - don't know enough to decide whether the airbnb lint style (with some changes) is appropriate for the apollo client examples – MonkeyBonkey Nov 15 '16 at 23:42
The answer to your question was to add PropTypes. However, if something in your config is forbidding certain PropTypes then you'll continue to see this error. I use the AirBnB linter, but I don't have any PropTypes forbidden. – Toby Nov 15 '16 at 23:53
Something else to bear in mind: you can add `// eslint-disable-line` on the line where the linting error occurs to override a one-off linting problem. However, I have found good linting has been invaluable in my projects for catching issues and enforcing best practices. – Toby Nov 16 '16 at 13:04

eslint error "data is missing in props validation" in apollo react app

1 Answers1