Relay: how to createPaginationContainer set initial variables

[wanganzhi1986]

hi:
i have an createPaginationContainer
`

export default createPaginationContainer(CourseList,
    graphql`
    fragment Courses_viewer on Viewer 
    {
      courses (after: $afterCursor first: $count) @connection(key: "Courses_courses") {
        pageInfo {
          hasNextPage
          endCursor
        },
        edges {
          node {
            id
            name
            learnTimes
            clickNums
            addTime
            degree
            favNums
          }
        }
      }
    }
  `,
    {
        direction: 'forward',
        getConnectionFromProps(props) {
            return props.viewer && props.viewer.courses
        },
        getFragmentVariables(prevVars, totalCount) {
            return {
                ...prevVars,
                count: totalCount,
            }
        },
        getVariables(props, { count, cursor }) {
            return {
                afterCursor: cursor,
                count,
            }
        },
        query: graphql`
      query CoursesPaginationQuery($afterCursor: String, $count: Int!) {
        viewer {
          ...Courses_viewer
        }
      }
    `,
    },
)

the container is included in QueryRender query:

const rootQuery = graphql`
    query rootViewerQuery($afterCursor: String, $count: Int!) {
        viewer {
            ...Courses_viewer
        }
    }

const rootVariables = {
    Count: COURSE_COUNT,
    afterCursor: null,
};
<QueryRenderer
  environment={environment}
  query={rootQuery}
  variables={rootVariables}
/>

But I get an error as follow:
Error: Variable "$afterCursor" is not defined by operation "rootViewerQuery".Variable "$count" is not defined by operation "rootViewerQuery".

how to fix the problem? thanks !

[joonhocho]

Did you run relay-compiler without error?

[slicejunk]

I would do:

export default createPaginationContainer(CourseList,
    graphql`
    fragment Courses_viewer on Viewer 
    {
      courses (after: $afterCursor first: $count) @connection(key: "Courses_courses") @argumentDefinitions(
        after: {
          type: String
        }
        first: {
          type: Int
          defaultValue: 10 # or somthing else
        }
      ) {
        # not needed, pagination container do it for us
        #pageInfo {
        # hasNextPage
        #  endCursor
        # },
        edges {
          node {
            id
            name
            learnTimes
            clickNums
            addTime
            degree
            favNums
          }
        }
      }
    }
  `,
    {
        direction: 'forward',
        getConnectionFromProps(props) {
            return props.viewer && props.viewer.courses
        },
        getFragmentVariables(prevVars, totalCount) {
            return {
                ...prevVars,
                count: totalCount,
            }
        },
        getVariables(props, { count, cursor }) {
            return {
                afterCursor: cursor,
                count,
            }
        },
        query: graphql`
          query CoursesPaginationQuery(
            $afterCursor: String
            $count: Int!
            ) {
            viewer {
              ...Courses_viewer @arguments(
                after: $afterCursor
                count: $count
                )
            }
          }
        `,
    },
)

and

const rootQuery = graphql`
query rootViewerQuery {
    viewer {
        ...Courses_viewer
    }
}

[nodkz]

I agree that createPaginationContainer should have an ability to define default values.
And @slicejunk solution quite comfortable, but requires to improve relay-compiler cause it does not have argumentDefinitions directive in the schema and throws with error:

ERROR:
GraphQLParser: Unknown directive `@argumentDefinitions`. Source: document `CustomerConnection_viewer` file: `app/customers/Custom
erConnection.js`.

[stan-sack]

@nodkz did you ever fix that error. How did you do it?

[sibelius]

you need to use @argumentDefintions to set default variables for createPaginationContainer

check my blog post on this:
https://medium.com/entria/relay-modern-argumentdefinitions-d53769dbb95d

use relay 1.5.0 or latest version