Pagination in Teachify Admin API

Note: The Teachify Admin API is currently under development and not yet available for public use. This documentation is provided for preview purposes only.

Understanding Pagination

The Teachify Admin API uses cursor-based pagination to efficiently handle large datasets. This approach allows you to retrieve data in manageable chunks while maintaining consistent results across requests.

Pagination Structure

All paginated responses follow a consistent structure:

{
  "data": {
    "resourceName": {
      "nodes": [
        // Array of resource objects
      ],
      "pageInfo": {
        "hasNextPage": true,
        "endCursor": "cursor-string"
      }
    }
  }
}

The key components are:

• nodes: An array containing the requested resources for the current page
• pageInfo: Metadata about the current page and navigation
  • hasNextPage: Boolean indicating if more results exist beyond this page
  • endCursor: A string cursor that can be used to fetch the next page

Pagination Parameters

When querying paginated resources, you can use these parameters:

Parameter	Type	Description
first	Int	Number of items to return (default: 20, max: 100)
after	String	Cursor string from a previous query’s endCursor

Pagination Example

Initial Query

To fetch the first page of courses:

query {
  courses(first: 10) {
    nodes {
      id
      name
      description
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Subsequent Pages

To fetch the next page, use the endCursor from the previous response:

query {
  courses(first: 10, after: "previous-end-cursor") {
    nodes {
      id
      name
      description
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

JavaScript Pagination Example

Here’s how to implement pagination in JavaScript:

async function fetchAllCourses(apiKey) {
  const endpoint = 'https://teachify.io/admin/graphql';
  let hasNextPage = true;
  let after = null;
  let allCourses = [];

  while (hasNextPage) {
    const query = `
      query Courses($first: Int, $after: String) {
        courses(first: 25, after: $after) {
          nodes {
            id
            name
            description
          }
          pageInfo {
            hasNextPage
            endCursor
          }
        }
      }
    `;

    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Teachify-API-Key': apiKey
      },
      body: JSON.stringify({
        query,
        variables: { first: 25, after }
      })
    });

    const result = await response.json();
    const { nodes, pageInfo } = result.data.courses;

    allCourses = [...allCourses, ...nodes];
    hasNextPage = pageInfo.hasNextPage;
    after = pageInfo.endCursor;

    console.log(`Fetched ${nodes.length} courses. Total so far: ${allCourses.length}`);
  }

  return allCourses;
}

Best Practices

1. Use reasonable page sizes: Request only what you need. Smaller page sizes (10-25 items) are better for interactive UIs, while larger sizes (50-100) may be more efficient for data processing.

2. Always check hasNextPage: Don’t assume there are more pages based on the number of items returned.

3. Store the endCursor: Save the cursor between user interactions or application states to maintain pagination position.

4. Handle empty results: Your code should gracefully handle cases where no results are returned.

5. Avoid fetching all pages at once: For very large datasets, consider implementing “load more” or traditional page navigation rather than automatically loading all pages.