GraphQL查询切片时出现“Unknown argument 'first'”错误的技术问询

Hey there! Let's break down your problem and fix it step by step.

Why You're Getting That Error #

The error message says it all: your GraphQL schema doesn't define a first argument for the items field on the Sequence type. While first/last are common conventions for limiting result counts in GraphQL, they aren't built into the spec by default—you have to explicitly add these parameters to your schema and handle them in your resolver code.

Step 1: Update Your Schema to Support the first Parameter #

First, let's fix the schema definition for the items field. Right now, it probably looks something like this (without any arguments):

type Sequence {
  items: [Item!]!
}

To allow limiting the number of returned items, modify it to accept a first parameter:

type Sequence {
  # Add the `first` argument (optional, with Int type)
  items(first: Int): [Item!]!
}

If you want to follow standard GraphQL pagination practices (like Relay's Connection pattern), you can define a more robust setup for future scalability:

type Sequence {
  itemsConnection(first: Int, after: String): ItemConnection!
}

# Standard connection wrapper for paginated results
type ItemConnection {
  edges: [ItemEdge!]!
  pageInfo: PageInfo!
}

type ItemEdge {
  node: Item!
  cursor: String!
}

type PageInfo {
  hasNextPage: Boolean!
  endCursor: String
}

Step 2: Handle the first Parameter in Your Resolver #

Adding the parameter to the schema is only half the work—you need to write resolver logic to actually use it. Here's an example using JavaScript/Node.js:

For the simple first parameter setup:

const resolvers = {
  Sequence: {
    items: (parent, { first }, context) => {
      // Fetch all items for the sequence from your data source
      const allItems = context.database.getItemsForSequence(parent.id);
      // If `first` is provided, return only the first N items; else return all
      return first ? allItems.slice(0, first) : allItems;
    }
  }
};

For the Connection pattern setup:

const resolvers = {
  Sequence: {
    itemsConnection: (parent, { first = 10, after }, context) => {
      const allItems = context.database.getItemsForSequence(parent.id);
      
      // Handle cursor-based pagination (assuming cursor is the item's ID)
      const startIndex = after 
        ? allItems.findIndex(item => item.id === after) + 1 
        : 0;
      const slicedItems = allItems.slice(startIndex, startIndex + first);
      
      return {
        edges: slicedItems.map(item => ({ node: item, cursor: item.id })),
        pageInfo: {
          hasNextPage: startIndex + slicedItems.length < allItems.length,
          endCursor: slicedItems.length > 0 ? slicedItems.at(-1).id : null
        }
      };
    }
  }
};

Step 3: Adjust Your Query #

Once the schema and resolver are updated, your query will work as expected.

Simple first parameter query:

query sequence($id: String) {
  sequence(id: $id) {
    items(first:5) { # Now this will return the first 5 items
      content
    }
  }
}

Connection pattern query:

query sequence($id: String) {
  sequence(id: $id) {
    itemsConnection(first:5) {
      edges {
        node {
          content
        }
      }
      pageInfo {
        hasNextPage # Tells you if there are more items to fetch
        endCursor # Use this for subsequent pagination requests
      }
    }
  }
}

Quick Note for Third-Party APIs #

If you're querying someone else's API (not maintaining the schema yourself), double-check their documentation—they might use a different parameter name like limit instead of first. You can't modify their schema, so you'll need to use whatever arguments they've defined.

内容的提问来源于stack exchange，提问作者Jaakko Karhu