Trying to load extra records with async in a graphql query

Queries and Resources
,
1

I have a table where I load the 1st 100 records and want to be able to load the subsequent records in batches of 100. The following setup goes in an infinite loop (hence the inserted break) and keeps adding the first 100. I must not be passing the variables for first and after but am at a loss?

Here's the process so far:

After the first query "getJobberQuotesAwaitingResponse1stSet"
It triggers a JS query to update the table:

const initialData = getJobberQuotesAwaitingResponse1stSet.data.records || [];
table4DataSource.setValue(initialData);

Upon success it triggers another JS query "fetchRemainingData" which is where I'm having trouble passing the correct variables to get the next 100 until there are no more records (pages).

async function fetchRemainingData() {
  let allRecords = table4DataSource.value || [];
  let hasNextPage = getJobberQuotesAwaitingResponse1stSet.data.pageInfo.hasNextPage;
  let afterCursor = getJobberQuotesAwaitingResponse1stSet.data.pageInfo.endCursor;

  while (hasNextPage) {
    const data = await getJobberQuotesAwaitingResponseRemainder.trigger({
      additionalScope: {
        first: 100,
        after: afterCursor
      }
    });

    if (data && data.pageInfo) {
      const newRecords = data.records || [];
      allRecords = [...allRecords, ...newRecords];
      hasNextPage = data.pageInfo.hasNextPage;
      afterCursor = data.pageInfo.endCursor;
      table4DataSource.setValue(allRecords);

break;
      // Exit if no more pages
      if (!hasNextPage) break;
    } else {
      // Exit if the response structure is not as expected
      console.log("No more pages or invalid response structure.");
      break;
    }
  }
}

return fetchRemainingData();

My query getJobberQuotesAwaitingResponseRemainder:

query getJobberQuotesAwaitingResponse($first: Int = 100, $after: String) {
  quotes(filter: {status: awaiting_response}, first: $first, after: $after) {
    edges {
      node {
        id
        quoteNumber
        clientHubViewedAt
        quoteStatus
        jobberWebUri
        transitionedAt
        client {
          companyName
          defaultEmails
        }
        property {
          address {
            street
            city
          }
        }
      }
    }
    totalCount
    pageInfo {
      endCursor
      hasNextPage
      hasPreviousPage
      startCursor
    }
  }
}
2

Hi @Shawn_Optipath,

// Array to store all records
const allData = []

// Helpfun fn to handle pagination
const getData = async (cursor = false) => {
  // Base scope
  const additionalScope = { first: 100 }
  if(cursor) {
    // Add cursor if it exists
    additionalScope.cursor = cursor
  }
  // Fetch data
  const data = await getJobberQuotesAwaitingResponseRemainder.trigger({
      additionalScope })

  // Add in validation as needed

  // Push records to allData array
  allData.push(data.records)
  if(data.pageInfo.hasNextPage) {
    // If there is a next page, call the function again
    return getData(data.pageInfo.endCursor)
  } else {
    // If done, just return
    return
  }
}

// Get the data
await getData()
// Return the array of data
return allData // or table4DataSource.setValue(allData)

That should work since the after variable in your GraphQL query is an optional string.

2 Likes
3

I finally came back to this and I hadn't properly set the variables in my getJobberQuotesAwaitingResponseRemainder query.

  • first: {{first}}
  • after: {{after}}

That did the trick!

1 Like