调用gql时遇TypeError: parse is not a function问题求助

Hey there! Let's work through this issue step by step—first that annoying TypeError: parse is not a function error, then your stuck mutation.

1. Fix the parse is not a function Error First #

This error almost always ties to issues with how you're importing or using gql, or version conflicts between GraphQL-related packages. Here's what to check:

a. Verify your gql import source #

If you're using Apollo Client 3 or newer, you don't need the standalone graphql-tag package—Apollo Client includes its own gql utility. Using both can cause version clashes that trigger this parse error.

• Do this:
  1. Uninstall the standalone graphql-tag package:

     npm uninstall graphql-tag
     # or
     yarn remove graphql-tag
     

  2. Update all your imports to pull gql directly from @apollo/client:

     // Replace this:
     // import gql from 'graphql-tag'
     
     // With this:
     import { gql } from '@apollo/client'
     

b. Check for conflicting GraphQL versions #

If you still see the error, you might have multiple versions of the graphql package installed (a common culprit when mixing dependencies). Run this command to check:

npm list graphql
# or
yarn list graphql

If you see multiple versions, delete your node_modules folder and lock file (package-lock.json or yarn.lock), then re-install dependencies with npm install or yarn install. This ensures all packages use a consistent GraphQL version.

2. Troubleshooting the Stuck Mutation #

Once the parse error is fixed, let's tackle why your mutation isn't working. Since your queries used to work, the issue is likely in your mutation setup:

a. Double-check your mutation syntax #

Make sure your mutation follows proper GraphQL syntax, including correct variable definitions and matching the backend schema. For example:

// Correct mutation structure
const ADD_DATA = gql`
  mutation AddData($input: YourDataInputType!) {
    addData(input: $input) {
      id
      name
      # Include all fields you need returned
    }
  }
`

Common mistakes here:

• Typos in the mutation name or field names (must match your backend schema exactly)
• Missing required variables or incorrect variable types
• Forgetting to specify the fields you want returned after the mutation

b. Verify your mutation execution code #

If you're using Apollo's useMutation hook, ensure you're passing variables correctly. Example of a working implementation:

import { useMutation, gql } from '@apollo/client';

const ADD_DATA = gql`
  mutation AddData($input: DataInput!) {
    addData(input: $input) {
      id
      title
    }
  }
`;

function AddDataForm() {
  const [addData, { loading, error }] = useMutation(ADD_DATA);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      title: e.target.title.value,
      // Match the fields expected by your DataInputType
    };

    // Pass variables correctly
    addData({ variables: { input: formData } })
      .then((result) => console.log('Data added:', result))
      .catch((err) => console.error('Mutation failed:', err));
  };

  if (loading) return <p>Saving...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" placeholder="Enter title" />
      <button type="submit">Add Data</button>
    </form>
  );
}

• Ensure you're passing variables in the variables object (not directly as arguments)
• Check the browser console for detailed error messages from your GraphQL server—this will often tell you if the mutation is failing due to schema mismatches or validation errors.

c. Confirm backend schema and resolver setup #

Since queries worked, your backend is reachable, but double-check that:

• The mutation exists in your backend schema
• The mutation resolver is correctly implemented and returns the expected data
• Any authentication/authorization rules aren't blocking the mutation (if applicable)

内容的提问来源于stack exchange，提问作者Hjelmut4