React-apollo: Apollo PropTypes

[sedubois]

Similar to the nifty Fragment propTypes, is an ad-hoc react-apollo propType shape available? It might be quite helpful to bring the GraphQL type system within JS? Something like:

import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const Users = props => (...);
const query = gql`{...}`;
const UsersWithData = graphql(query, { options: ... });
Users.propTypes = UsersWithData.getShape();
export default UsersWithData(Users);

[tmeasday]

How would Users.propTypes = UsersWithData.getShape(); work exactly?

See https://github.com/apollostack/react-apollo/issues/333

[sedubois]

I don't have an exact idea at this point. But Apollo in theory has all the information to build this (GraphQL schema + query)? If it somehow manages to validate that a query complies to the schema, I guess it means it knows the types, so it could return a JSON object with this type info.

[tmeasday]

Actually I don't think Apollo yet fetches the schema from the server (although I think this may be planned).

I guess there's sort of a begged question here which is -- if you trust Apollo is going to pass the right thing for your query, then what exactly is the point in having prop types at all?

[sedubois]

Indeed. But then same question about Fragment propTypes, why were they added? I guess either PropTypes should be fully supported in GraphQL-connected components, or not at all. If not at all, then somehow eslint's prop-types rule should know that it needs to ignore Apollo components.

[tmeasday]

As an aside, it you can use propTypes on query documents too.

So if you are using the default props from Apollo, you could do something like:

@graphql(query)
class MyComponent extends Component {
  static propTypes {
     data: PropTypes.shape({
        ...propTypes(query),
        loading: PropTypes.boolean,
        error: PropTypes.object,
     });
  }
}

And if we do #333, that could be simplified to

     data: PropTypes.shape({
        ...propTypes(query),
        ...graphqlPropTypes,
     });

[sedubois]

It seems like we can now get proptypes for a whole query: https://github.com/apollostack/graphql-anywhere?

const doc = gql`query { ... }`;
X.propTypes = {
  data: propType(doc).isRequired,
};

[helfer]

@sedubois yeah, looks like it. Although I don't believe we have any documentation for it at the moment.

[tremby]

What was the resolution here? @tmeasday, what you say above looks great but what is this propTypes() function; where can I get that? I can't find it in react-apollo -- is it hypothetical? Or do I need to use graphql-anywhere as @sedubois suggests? Is that a replacement for react-apollo or an extra utility library, or what?

[tmeasday]

@tremby - propType is exported by graphql-anywhere, yeah.

[tremby]

Does this add much bloat, presuming that's the only feature I want?

[tmeasday]

Not at all, graphql-anywhere is pretty simple.