Hi has anyone used getStaticProps and getStaticPaths with Keystonejs and Apollo ?
My code seems correct but I’m getting:
ApolloError: Response not successful: Received status code 400
Params and slugs are all good.
What am I doing wrong?
Can you show the actual response, via graphiql, graphql-playground, or maybe even a HAR?.
Hi, thanks for responding! Here they are, the first two screen shots…
…the bottom image shows what happens if I hard code line 5 on the far right of my original screen shot and also remove ($slug: String!) on line 4. I can get the data with this…
`export async function getStaticProps({ params }) {
const { slug } = params
console.log('3. slug from params…', slug)
const { data } = await client.query({
query: gql`
query GetTeamQuery {
allTeamMembers(where: { slug: "example-two" }) {
id
…`
…but as soon as I try to pass the slug in as a variable it gives me the ApolloError 400.
Please show the request and response from the network tab.
If you were to save one of those as discrete files, it produces a .har file.
Hi, they’re both empty …
I can get this to work using useQuery but I’d rather statically render these pages. I’m just wondering if I’m going about this the right way?
You can use SSR, but most people probably use @apollo/client with React Functional Components.
Build your app however you want; I was just going to try to point out where your error is but it seems like you’re not really aware of how to view an HTTP request & response.
I can’t help you if I can’t see the actual error message you’re getting. 400 is an HTTP status code that means “you made the request wrong”, and happens whenever your query fails validation. Once you look at the results, it typically says in plain english what’s wrong with your query.
Hi, ok. Thanks for looking though. It’s my first time with Apollo. If I do work it out I’ll update it here for other users.
Just try something like this:
import serializeError from 'serialize-error';
new ApolloServer({
formatError: error => {
console.error(serializeError(error));
return error;
}
})
You might be able to get away with a simple console.error() without serialization.
Thanks – I’m using ApolloClient, not ApolloServer, or does that not matter?
Ah, I don’t use Keystonejs, so I couldn’t tell you how to log out errors on the server side easily with that framework.
At this point, if you can’t figure out how to view the actual HTTP request and you use other tools that I’ve not used on the server side, I can’t help you.
I suggest reviewing a guide on the chrome developer tools.
Ok, so what I’ve done as a work around is to use getStaticPaths as before and getStaticProps but querying all of the data. I then loop over that data and destructure the slugs. When a slug matches the slug in the query param, I push that into a new array and send that down as a prop to a component which renders out just the data for that particular page slug.