CombinedErrors graphQLErrors Unknown argument limit on field Query.posts - 尝试使用 urql、Strapi、Next JS 将参数传递给查询

Question

I'm simply trying to use a variable to pass in limit as an arg to my GraphQL query. I'm using urql version 3.0.1 and Strapi with its GraphQL plugin in a Next app.

I want to add a limit variable to limit the rows returned. I'll provide an example below followed by the full error code.

This Works

import { useQuery } from 'urql'

const GET_RECENT_POSTS_QUERY = `
query {
  posts (sort: "publishedAt:DESC") {
    data {
      attributes {
        publishedAt
        title
      }
    }
  }
}
`

export default function Example() {
  const [res] = useQuery({
    query: GET_RECENT_POSTS_QUERY,
  })

  return (
    <div>
      <h3>Recent Posts</h3>
      <div>{JSON.stringify(res)}</div>
    </div>
  )
}
`

Result

Recent Posts
{"fetching":false,"stale":false,"data":{"posts":{"data":[{"attributes":{"publishedAt":"2022-09-21T05:17:29.483Z","title":"Post Number 5","__typename":"Post"},"__typename":"PostEntity"},{"attributes":{"publishedAt":"2022-09-21T05:17:13.087Z","title":"Post Number 3 ","__typename":"Post"},"__typename":"PostEntity"},{"attributes":{"publishedAt":"2022-09-20T20:08:05.611Z","title":"Post Number 4","__typename":"Post"},"__typename":"PostEntity"},{"attributes":{"publishedAt":"2022-09-01T21:04:03.717Z","title":"My Second Post","__typename":"Post"},"__typename":"PostEntity"},{"attributes":{"publishedAt":"2022-09-01T19:22:20.413Z","title":"My First Post","__typename":"Post"},"__typename":"PostEntity"}], ...and so on

I'm attempting to pass in a variable to limit the number of results returned.

Doesn't Work - Passing in Variable

I've tried various approaches mainly around something like this.

const GET_RECENT_POSTS_QUERY = `
query ($limit: Int!){
  posts (limit: $limit, sort: "publishedAt:DESC") {
    data {
      attributes {
        publishedAt
        title
      }
    }
  }
}
`

export default function Example() {
  const [res] = useQuery({
    query: GET_RECENT_POSTS_QUERY,
    variables: { limit: 3 },
  })
  // ...

Result/Error

Error starts with:

"error":{"name":"CombinedError","graphQLErrors":[{"message":"Unknown argument \"limit\" on field \"Query.posts\"

Full error:

Recent Posts
{"fetching":false,"stale":false,"error":{"name":"CombinedError","graphQLErrors":[{"message":"Unknown argument \"limit\" on field \"Query.posts\".","extensions":{"code":"GRAPHQL_VALIDATION_FAILED","exception":{"stacktrace":["GraphQLError: Unknown argument \"limit\" on field \"Query.posts\"."," at Object.Argument (/path-to-project/backend/node_modules/graphql/validation/rules/KnownArgumentNamesRule.js:46:29)"," at Object.enter (/path-to-project/backend/node_modules/graphql/language/visitor.js:323:29)"," at Object.enter (/path-to-project/backend/node_modules/graphql/utilities/TypeInfo.js:370:25)"," at visit (/path-to-project/backend/node_modules/graphql/language/visitor.js:243:26)"," at validate (/path-to-project/backend/node_modules/graphql/validation/validate.js:69:24)"," at validate (/path-to-project/backend/node_modules/apollo-server-koa/node_modules/apollo-server-core/dist/requestPipeline.js:186:39)"," at processGraphQLRequest (/path-to-project/backend/node_modules/apollo-server-koa/node_modules/apollo-server-core/dist/requestPipeline.js:98:34)"," at processTicksAndRejections (node:internal/process/task_queues:96:5)"," at async processHTTPRequest (/path-to-project/backend/node_modules/apollo-server-koa/node_modules/apollo-server-core/dist/runHttpQuery.js:220:30)"," at async /path-to-project/backend/node_modules/apollo-server-koa/dist/ApolloServer.js:83:59"]}}}],"response":{}},"operation":{"key":2405370831,"query":{"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},"directives":[]}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"posts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"StringValue","value":"publishedAt:DESC","block":false}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"publishedAt"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"title"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}}]}}],"loc":{"start":0,"end":115,"source":{"body":"query ($limit: Int!) { posts(limit: $limit sort:\"publishedAt:DESC\") { data { attributes { publishedAt title } } } }","name":"gql","locationOffset":{"line":1,"column":1}}}},"variables":{"limit":3},"kind":"query","context":{"url":"http://localhost:1337/graphql","preferGetMethod":false,"requestPolicy":"cache-first","suspense":false,"meta":{"cacheOutcome":"miss"}}},"hasNext":false}

GraphQL seems to recognizes the variable $limit but it's unclear to me how it should be used. I'm sifting through docs and can't seem to find a relevant example. Perhaps I'm missing something fundamental about GraphQL/Strapi plugin or associated packages, as I haven't used them extensively. Is there some other set up involved to accomplish using variables/arguments like this?

Answer 1

For any others stumbling on this, I ended up getting this to work with pagination from the Strapi GraphQL API

Solution

const GET_RECENT_POSTS_QUERY = `
query ($limit: Int!) {
  posts (pagination: {start: 0, limit: $limit}, sort: "publishedAt:DESC") {
    data {
      attributes {
        publishedAt
        title
      }
    }
  }
}
`

export default function Example() {
  const [res] = useQuery({
    query: GET_RECENT_POSTS_QUERY,
    variables: { limit: 3 },
  })
  // ...