4

I have been stuck on this bug for now a while, so any help would be much appreciated!! :)

I am building a web app with:

  • Backend server running with Spring Boot
  • Frontend server running with React/TypeScript/GraphQL

So far I have managed to make the Backend work & tested it with Insomnia (the equivalent of Postman..) I have also been able to test the frontend with simple queries without variables - so far so good...

I am now trying to pass variables value to a mutation (frontend side) but I get the following error: Although, the mutation works fine if I hard code the values and remove the $ variables.

Variable 'input' has coerced Null value for NonNull type 'PostInput!'

If I run the mutation with the Apollo Chrome extension, I get the following error (different):

{ "errors": [ { "message": "Unexpected token V in JSON at position 0", "locations": [ "ServerParseError: Unexpected token V in JSON at position 0\n at JSON.parse ()\n at http://localhost:3000/static/js/0.chunk.js:45120:21" ] } ] }

Hope some code will help:

Mutation

import gql from "graphql-tag";

export const MUTATE_POST = gql`
  mutation MutatePost($input: PostInput!) {
    mutatePost(post: $input) {
      id
      title
      description
    }
  }
`;

Apollo Client

import ApolloClient from "apollo-boost";

const URI_DEV = "http://localhost:9090/posts";

export const client = new ApolloClient({
  uri: URI_DEV
});

Root App index.tsx

import { ApolloProvider } from "@apollo/react-hooks";

function App() {
  return (
    <ApolloProvider client={client}>
      <Home />
    </ApolloProvider>
  );
}

render(<App />, document.getElementById("root"));

In React Component

import { useMutation } from "@apollo/react-hooks";

 const [mutatePost] = useMutation(MUTATE_POST);

  const onClickSubmit = () => {
    mutatePost({ variables: { input: { title: "...", description: "..."} } })
      .then(() => {
        onClose();
      })
      .catch(error => {
        console.error(error);
      });
  };

GraphQL schema (Backend side)

schema {
    query: Query
    mutation: Mutation
}

input PostInput {
    id: String
    title: String!
    description: String!
}

type Post {
    id: ID!
    title: String!
    description: String!
}

type Query {
    getAllPosts: [Post]!
}

type Mutation {
    mutatePost(post: PostInput!) : Post
    deletePostsByIds(ids: [ID]!) : [Post]
}

Am I missing anything / any typo anywhere? I am still new to this, unfortunately...

Thank you in advance for your help !!!!!!

Come.T
  • 91
  • 1
  • 4
  • That usage appears correct. What library and version are you using for the hooks? – Daniel Rearden Mar 20 '20 at 23:42
  • @Daniel Rearden Thanks for the quick reply! I am using "@apollo/react-hooks (v3.1.3) "for useMutation & ApolloProvider, "graphql-tag" for gql, and "apollo-boost" (v0.4.7) for the client. – Come.T Mar 21 '20 at 08:06
  • 1
    Fixed the issue! The problem was actually coming from the backend service. To make it work, I had to add an additional field (variables) to the Controller Input structure! Thanks for the help anyway! – Come.T Mar 21 '20 at 16:15

0 Answers0