Apollo-client: Uncaught (in promise) Error: GraphQL error

[appjitsu]

1795

My code is very similar to:

• client: https://github.com/apollographql/GitHunt-React/blob/7f124b2b606b4ae503318e35f1516929a9629b20/ui/routes/NewEntryPage.js
• server: https://github.com/apollographql/GitHunt-API/blob/e3de8c0226394a071c72313c59e340e8b8ea7a29/api/schema.js

So I changed up my code a bit.

The browser console shows an error:

bundle.js:11329 Uncaught (in promise) Error: GraphQL error: List or Action not found.
    at new ApolloError (bundle.js:11329)
    at bundle.js:35134
    at <anonymous>

The network tab shows:

{"errors":[{"message":"List or Action not found.","locations":[{"line":2,"column":3}],"path":["addMount"]}],"data":{"addMount":null}}

Client code:

AddMount({
      variables: {
        id: mountId,
        parent,
        parentType,
        owner,
      },
    })
    .then((res) => {
      console.log('res: ', res);
    });
...
export default compose(
  graphql(AddMount, {
    name: 'AddMount',
  }),
)(MountModal);

My mutation:

addMount: {
      type: ActionType,
      args: {
        id: { type: new GraphQLNonNull(GraphQLString) },
        parent: { type: new GraphQLNonNull(GraphQLString) },
        parentType: { type: new GraphQLNonNull(GraphQLString) },
        owner: { type: new GraphQLNonNull(GraphQLString) },
      },
      resolve(parentValue, { id, parent, parentType, owner }, req) {
        console.log('adding mount...');
        console.log('id: ', id);
        console.log('parent: ', parent);
        console.log('parentType: ', parentType);
        console.log('owner: ', owner);

        return Promise.resolve()
        .then(() => {
          // there can be only one mount of this id per parent
          return Action.findOne({ mount: id, parent });
        })
        .then((existingMount) => {
          console.log('existingMount', existingMount);
          if (existingMount) {
            throw new Error('That mount already exists.');
          } else {
            const queries = [];

            queries.push(new Promise((resolver) => {
              List.findById(id)
              .exec((err, res) => {
                resolver(res);
              })
            }));
            queries.push(new Promise((resolver) => {
              Action.findById(id)
              .exec((err, res) => {
                resolver(res);
              })
            }));

            // when all queries are done
            return Promise.all(queries);
          }
        })
        .then((queries) => {
          console.log('queries data', queries);
          const listLookup = queries[0];
          const actionLookup = queries[1];

          if (!listLookup && !actionLookup) {
            throw new Error('List or Action not found.');
          } else {
            const type = listLookup ? 'list' : 'action';
            console.log('type: ', type);

            const parentModel = parentType === 'list' ? List : Action;
            return { parent: parentModel.findById(parent), parentModel };
          }
        })
        .then(({ parent, parentModel }) => {
          console.log('parentObj: ', parent);
          if (!parent) {
            throw new Error('Parent was not found.');
          } else {
            const action = new Action({
              mount: id,
              type,
              parent,
              parentType,
              owner,
              order: parent.actions.length + 1,
            });

            action.save((err, action) => {
              parentModel.findOneAndUpdate({
                _id: parent,
              },
              { $push: { actions: action._id } },
              (err, res) => {
                // err ? reject(err) : resolve(action);
                return action;
              });
            });
          }
        })
        .catch((e) => {
          throw e;
        });
      },
    },

[appjitsu]

@helfer I'm an idiot apparently...

I figured out my issue finally after it donned on me about what you were saying. I've been taking cold meds and I guess my brain is having a seizure.

Thanks for your help.

AddMount({
      variables: {
        id: mountId,
        parent,
        parentType,
        owner,
      },
    })
    .catch((res) => {
      const errors = res.graphQLErrors.map((error) => {
        return error.message;
      });
      this.setState({ errors });
    });

[helfer]

Thanks @appjitsu. I'm glad you figured it out. Sorry I closed the other issue too quickly!

[webmobiles]

I use

mymutation = gql`
        mutation registrationUpdate(  $id: ID!,  $customer_id: String,  ) {
          registrationUpdate (  id: $id,  customer_id: $customer_id,  {
              id
              customer_id
          }    
        }`;

then:

const ComponentWithMutations = compose(
    graphql(mymutation, {
      name: 'mutationData',
      options: props => ({
        variables: { id: props.match.params.id },
        fetchPolicy: 'network-only',
      }),
    })
   (...)
)(withRouter(withCrudFormContainer));

@appjitsu why you don't use gql ? but manual graphql declaration
@helfer  where I can write the catch?  my mutation don't get the errors but "function ApolloError(_a) " yes ...  reply from server is 200 like:

Uncaught (in promise) Error: GraphQL ensrror: SequelizeDatabaseError: spiexceptions.SyntaxError: syntax error at or near "c4c47059"

how to get those errors, query loading and errors is ok , but not with mutatio

[AndreiRailean]

This is still possible in current versions of <Query> it's kinda silly that you provide an error prop as well as throw it. This forces an extra .catch on an otherwise synchronous-looking code.