I try to integrate GraphQL PHP in backend with Apollo client and React in front end) but I get an undefined post response

Question

1st response give this message.

    <br/><b>Warning</b>:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in <b>F:\not in personal laptop\web dev usb 17-7-23\scandiweb\test me\source graphql-php-tutorial\graphql-php-tutorial\n-plus-one-query-problem - react\server\vendor\webonyx\graphql-php\src\Validator\Rules\OverlappingFieldsCanBeMerged.php</b>on line<b>355</b><br /><br/><b>Warning</b>:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in <b>F:\not in personal laptop\web dev usb 17-7-23\scandiweb\test me\source graphql-php-tutorial\graphql-php-tutorial\n-plus-one-query-problem - react\server\vendor\webonyx\graphql-php\src\Validator\Rules\OverlappingFieldsCanBeMerged.php</b>on line<b>360</b><br /><br/><b>Warning</b>:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in <b>F:\not in personal laptop\web dev usb 17-7-23\scandiweb\test me\source graphql-php-tutorial\graphql-php-tutorial\n-plus-one-query-problem - react\server\vendor\webonyx\graphql-php\src\Executor\Executor.php</b>on line<b>469</b><br /><br/><b>Warning</b>:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in <b>F:\not in personal laptop\web dev usb 17-7-23\scandiweb\test me\source graphql-php-tutorial\graphql-php-tutorial\n-plus-one-query-problem - react\server\vendor\webonyx\graphql-php\src\Executor\Executor.php</b>on line<b>481</b><br /><br/><b>Warning</b>:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in <b>F:\not in personal laptop\web dev usb 17-7-23\scandiweb\test me\source graphql-php-tutorial\graphql-php-tutorial\n-plus-one-query-problem - react\server\vendor\webonyx\graphql-php\src\Executor\Executor.php</b>on line<b>493</b><br /><br/><b>Warning</b>:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in <b>F:\not in personal laptop\web dev usb 17-7-23\scandiweb\test me\source graphql-php-tutorial\graphql-php-tutorial\n-plus-one-query-problem - react\server\vendor\webonyx\graphql-php\src\Executor\Executor.php</b>on line<b>500</b><br />{
        "data": {
            "categories": [
                {
                    "id": 1,
                    "name": "Category",
                    "typename": "all",
                    "__typename": "Category"
                },
                {
                    "id": 2,
                    "name": "Category",
                    "typename": "clothes",
                    "__typename": "Category"
                },
                {
                    "id": 3,
                    "name": "Category",
                    "typename": "tech",
                    "__typename": "Category"
                }
            ]
        }
    }

I think that line 1 in the response is the problem, I could not delete it.

2nd response give this message

{
    "error": {
        "message": "GraphQL query body is expected to be string, but got array"
    }
}

3rd response look like the 2nd

I used so many ways to could parse data from my server to my client but I could not. For example I used this method using the axios library if we want to fetch data, from this site:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { GET_USERS } from '../queries';

function UserList() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.post('https://your-graphql-api-endpoint.com/graphql', {
          query: GET_USERS,
        });

        if (response.data.errors) {
          throw new Error(response.data.errors[0].message);
        }

        setUsers(response.data.data.users);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

For backend composer.json:

{
    "require": {
        "webonyx/graphql-php": "^0.9.8"
    },
    "autoload": {
        "psr-4": {
            "App\\": "App/"
        }
    },
    "config": {
        "platform": {
            "php": "7.4"
        }
    }
}

For frontend package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.10.3",
    "@reduxjs/toolkit": "^2.2.5",
    "@stripe/react-stripe-js": "^2.7.1",
    "@stripe/stripe-js": "^3.4.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "apollo3-cache-persist": "^0.15.0",
    "axios": "^1.7.2",
    "flowbite": "^2.3.0",
    "graphql": "^16.8.2",
    "graphql-tag": "^2.12.6",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.23.0",
    "react-scripts": "5.0.1",
    "react-use-cart": "^1.13.0",
    "swiper": "^11.1.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.4.3"
  }
}

when i used Advanced error handling with Apollo Link

import { ApolloClient, HttpLink, InMemoryCache, from } from "@apollo/client";
import { onError } from "@apollo/client/link/error";

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.error(`[Network error]: ${networkError}`);
});

const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql' })

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([errorLink, httpLink]),
});

i saw in console this error

[Network error]: ServerParseError: Unexpected token '<', "<br />
<b>"... is not valid JSON