Discussion on: I Migrated Away from Apollo Client to Vercel SWR and Prisma graphql-request...and You Can Too!

[Phan Hong Duc]

hi, I am learning Nextjs with Graphql.
I have a problem when using useSWR to fetch data from Graphql api.
const ALL_PRODUCTS2 = /* GraphQL */
query allProducts($skip: String!, $take: String!) {
allProducts(skip: $skip, take: $take) {
id
name
}
}
;`

const fetcher = (query: any, first: string, take: string) => request('localhost:3000/api/graphql', query, {first, take});

export default function Products() {
const {data} = useSWR([ALL_PRODUCTS2, '0', '3'], fetcher)
const loading: boolean = !data;
.......
}`

=> I get the error : ClientError: Variable "$skip" of required type "String!" was not provided.: {"response":{"errors":[{"message":"Variable \"$skip\" of required type \"String!\" was not provided.","locations":[{"line":2,"column":23}]}],"status":500},"request":{"query":"\n query allProducts($skip: String!, $take: String!) {\n allProducts(skip: $skip, take: $take) {\n id\n name\n }\n }\n","variables":{"first":"0","take":"3"}}}


Please help me to fix it. thank you!!!

I am trying migrate from apolo to swr, and follow your instruction but... With apolo, it works.

Thank you!

[Naveen Bharathi]

Hi @hongducphan ,
You passed 'first' instead of 'skip' in the fetcher function. That is the problem. Renaming it should fix the issue.

query allProducts($skip: String!, $take: String!) {
                   ̅ ̅ ̅ ̅ ̅ 
  allProducts(skip: $skip, take: $take) {
    id
    name
  }
}

const fetcher = (query: any, first: string, take: string) => request('localhost:3000/api/graphql', query, { first, take });
                                                                                                             ̅ ̅ ̅ ̅ ̅