Gists for "Next.js & Apollo GraphQL Performance Tuning: Subtree Pagination"

RelatedPeople.jsx

    <RelatedPeople
        id={ '' }
        pageData={{
            first,
            offse,
            total
        }}
        data={ [ {}, {} ] }
        onLoadMore={ () => {} }
        skip={ true }
    />

species.graphql

type Species {
    id: ID
    name: String
    classification: String
    homeworld: Planet
    designation: String
    language: String
    average_height: String
    average_lifespan: String
    picture: String

    # the 'people' field contains all members of a Species
    # the query for this field accepts two parameters,
    # - pick the first n items
    # - starting from an offset
    #
    # by default it will get the first 10 Persons
    people(first: Int = 10 offset: Int = 0): [Person]

    peopleCount: Int
}

SpeciesDetails.js

    // SpeciesDetails component

    class SpeciesDetails extends React.Component {
        render() {
            const { species } = this.props.data

            return (<div>
                <h1>{species.name}</h1>

                <img src="{starship.picture}" />

                <ul>
                    <li>Homeworld: {species.homeworld}</li>
                    <li>Language: {species.language}</li>
                    <li>Classification: {species.classification}</li>
                    <li>Average Height: {species.average_height}</li>
                </ul>

                <h2>Members</h2>

                <RelatedPeople
                    id={ species.id }
                    pageData={{
                        first,
                        offse,
                        total
                    }}
                    data={ species.people }
                    onLoadMore={ () => this.onLoadMore() }
                    skip={ relatedPeople.skip }
                />
            </div>)
        }

        onLoadMore() {}
    }

    /*
        the rest below is basically the same as in the previous post in this series
        - setting the initial prop with next.js
        - preparing the graphql query
        - composing our page component with the queries, trying to fetch from cache first
    */

    SpeciesDetails.getInitialProps = async function ({ query }) {
        return {
            id: query.id
        }
    }

    const queryParams = {
        options: props => {
            return {
                // get notified if the GraphQL Query is in loading state
                notifyOnNetworkStatusChange: true,
                // put the ID from the props, to the variables, so the Query receives it
                variables: {
                    id: props.id
                },
            }
        }
    }

    const getSpeciesQuick = gql`
        query getSpeciesQuick($id: ID) {
            Species(id: $id) {
                id
                name
            }
        }
    `
    const getSpeciesFull = gql`
        query getSpeciesFull($id: ID) {
            Species(id: $id) {
                id
                name
                classification
                homeworld
                average_height
                language
                people {
                    id
                    name
                    picture
                }
            }
        }
    `
    export default compose(
        graphql(getSpeciesQuick, queryParams),
        graphql(getSpeciesFull, queryParams)
    )(SpeciesDetails)