使用Relay＆Graphql在根节点上分页

Question

Struggling to get this setup and beating my head against the wall. I have the following structure for my GraphQL DB:

Graphql Schema

let Schema = () => {

  let {nodeInterface, nodeField} = nodeDefinitions(
    (globalId) => {

      var {type, id} = fromGlobalId(globalId);
      if (type === 'Grant') {
        return GrantModel.findById(id);
      } else if (type === 'Scope') {
        return ScopeModel.findById(id);
      } else {
        return null;
      }
    },
    (obj) => {
      if (obj instanceof ScopeModel) {
        return scopeType;
      } else if (obj instanceof GrantModel)  {
        return grantType;
      } else {
        return null;
      }
    }
  );


  let grantType = new GraphQLObjectType({
    name: 'Grant',
    fields: () => ({
      id: globalIdField('Grant'),
      name: {type: GraphQLString},
      description: {type: GraphQLString}
    }),
    interface : [nodeInterface]
  });

  let scopeType = new GraphQLObjectType({
    name:'Scope',
    fields: () => ({
      id: globalIdField('Scope'),
      description: {type: GraphQLString},
      name: {type: GraphQLString},
      enabled: {type: GraphQLBoolean},
      grants: {type: new GraphQLList(grantType)}
    })
  });


  let {connectionType: scopeConnection} = connectionDefinitions({nodeType: scopeType});

  let viewerType = new GraphQLObjectType({
    name: 'Viewer',
    fields: () => ({
      scopes: {
        type: scopeConnection,
        args: connectionArgs,
        resolve: async (scope, args) => connectionFromArray(await ScopeModel.find({}), args)
      }
    })
  });

  let schema = new GraphQLSchema({
    query: new GraphQLObjectType({
      name: 'Query',
      fields: () => ({
        viewer: {
          type: viewerType,
          resolve: () => {}
        }
      })
    })

    /*mutation: new GraphQLObjectType({
      name: 'Mutation',
      fields: () => ({
        incrementCounter: {
          type: GraphQLInt,
          resolve: () => 4
        }
      })
    })*/

  });

  return schema;
}

export default Schema;

I have the following react components; note my index.js is my root component, followed by ScopeList.js and then Scope.js :

index.js

const IndexQueryPage = graphql`
  query IndexQuery {
    viewer {
      ...ScopeList_scopes
    }
  }
`;

class Index extends React.Component {
  render () {
    return (
      <div className="container">
        <table className="table">
          <thead>
            <tr>
              <th>Date Added</th>
              <th>Service</th>
              <th>Description</th>
              <th>Enabled</th>
            </tr>
          </thead>
          <QueryRenderer
           environment={environment}
           query={IndexQueryPage}
           variables={{}}
           render={({error, props}) => {
             console.log(props);
             if(error) {
               return <tbody><tr><td colSpan='4'></td></tr></tbody>;
             }
             if(!props) {
               return <tbody><tr><td colSpan='4'>Loading.....</td></tr></tbody>;
             }
             return (
               <ScopeList scopes={props.scopes} />
             )
           }}
          />
        </table>
      </div>
    )
  }
}

module.exports = Index;

ScopeList.js

class ScopeList extends React.Component {
  render() {
    return (
      <tbody>
       {
         this.props.scopes.edges.map(edge => <Scope scope={edge.node} key={edge.node.cursor} />)
       }
      </tbody>
    )
  }
}

module.exports = createPaginationContainer(ScopeList, graphql`
  fragment ScopeList_scopes on Viewer
  @argumentDefinitions(
    count: {type: "Int", defaultValue: 10}
    cursor: {type: "String"}
  )
  {
    scopes (
      first: $count
      after: $cursor
    ) @connection(key: "ScopeList_scopes") {
      edges {
        cursor
        node {
          id
          name
          description
        }
      }     
    }
  }`,
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return null;
    },
    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount,
      };
    },
    getVariables(props, {count, cursor}, fragmentVariables) {
      return {
        count,
        cursor
      };
    },
    query: graphql`
      query ScopeListQuery(
        $count: Int!
        $cursor: String
      ){
        ...ScopeList_scopes @arguments(count: $count, cursor: $cursor)
      }
   `}
);

Scope.js

class Scope extends React.Component {
  render() {
    return (
      <tr key={this.props.scope.id}>
        <td>{this.props.scope.name}</td>
        <td>{this.props.scope.description}</td>
        <td></td>
        <td></td>
      </tr>
    )
  }
}

module.exports = createFragmentContainer(Scope, graphql `
  fragment Scope_scope on Scope {
    id
    name
    description
  }
`);

Essentially I'm trying to setup pagination on the root node scopes however, my understanding is that I needed to decouple this as a root by adding it as a child to viewer . However, I'm getting the following errors:

ERROR in ./app/pages/Index.js
Module not found: Error: You supplied a GraphQL document with validation errors:
component/ScopeList.js: Fragment "ScopeList_scopes" cannot be spread here as objects of type "Query" can never be of type "Viewer".
 @ ./app/pages/Index.js 28:8-53
 @ ./app/component/App.js
 @ ./app/index.js

Answer 1

Can't spread a fragment of type Viewer on the root of a query which is type Query . Spread that fragment on the viewer field of the query