简体   繁体   中英

Error: Response not successful: Received status code 400 with GraphQL in Next.js app

I am trying to solve my problem with filtering data using GraphQL in Next.js. As a backend I use Strapi v4.

My code looks like this. This is the file [slug].js which is in pages folder and this is page for dynamic route.

import React from 'react'
import { Stack } from '@mui/material'

import { gql } from '@apollo/client'
import { client } from '../_app'

const TEACHINGS_BY_SLUG = gql`
    query TeachingsBySlug($slug: StringFilterInput){
      teachings(filters: {slug: {eq: $slug}}){
        data{
          id
        }
      }
    }
`

const PageTeaching = ({ teachings }) => {
    console.log(teachings)
    return (
        <Stack alignItems='center'>
            some filtered teachings
        </Stack>
    )
}

export const getStaticProps = async () => {
    console.log('revalidation mate...')
    const { data } = await client.query({
        query: TEACHINGS_BY_SLUG,
        variables: {
            slug: "teaching1"
        }
    })
    // const response = await fetch('http://localhost:1337/api/teachings?populate=*')
    // const data = await response.json()
    return {
        props: {
            teachings: data
        },
        revalidate: 10
    }
}

export const getStaticPaths = async () => {
    return {
        paths: [{
            params: { slug: "teaching1" }
        }],
        fallback: false
    }
}

// export const getServerSideProps = async () => {
//     const { data } = await client.query({
//         query: TEACHINGS_BY_SLUG,
//         variables: {
//             slug: "teaching1"
//         }
//     })
//     return {
//         props: {
//             teachings: data
//         }
//     }
// }

export default PageTeaching

I'm getting error 400 (as in the title above) and I know that the case should be in those two lines:

query TeachingsBySlug($slug: StringFilterInput){
      teachings(filters: {slug: {eq: $slug}}){

Because without adding filters variables everything is OK. I guess it could be some wrong notation but I don't know.

I will probably use getServerSideProps instead of getStaticProps / getStaticPaths but I think it will not make any difference with filtering itself.

SOLVED

I solved my mistake. I mistakenly passed wrong schema name. Instead of passing "StringFilterInput" schema name, I should pass just "String" schema name.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM