I'm trying to use a variable to pass in limit as an arg to my GraphQL query. I'm using urql 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.
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>
)
}
`
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.
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 },
})
// ...
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.
For any others stumbling on this, I ended up getting this to work with pagination from the Strapi GraphQL API
Likely just me doing a poor job of reading the docs :) but I'll leave the solution here just in case.
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 },
})
// ...