"I'm attempting to fetch a query in my React frontend, but I'm encountering a 'Bad Request' error from my backend server:Bad Request: /graphql
[17/May/2024 15:16:48] "POST /graphql HTTP/1.1" 400 283Initially, I noticed that I have a file named schema.py, and I tested the GraphQL query successfully using the views at http://127.0.0.1:8000/graphql#query. However, when I try to execute the same query from my React frontend in AlertsByUser.tsx:14, I encounter this error.Please correct the text accordingly."

Her we have the backend code : https://github.com/Hamza-bakk/CoinAPI-BackEnd
her we have the front end code : https://github.com/Hamza-bakk/CoinAPI-FrontEnd

In my front end

i have AlertByUser.tsx

// src/backend/ApiGraphQL/queries.js
import { gql } from 'graphql-request';

export const QueryAPI = {
ALL_ALERTS_BY_USER: gqlquery AlertsByUserId($userId: String!) { alertsByUserId(userId: $userId) { id currentPrice targetPrice isOpen user { id firstName lastName } } },

};
i create a resolver to call API backend and i give him token stocke in Cookies and user.id stocke in useAtom

// src/backend/ApiGraphQL/api.js
import { GraphQLClient } from 'graphql-request';
import { API_GRAPHQL } from '../../../../../config';
import { QueryAPI } from '../../RequeteAPI/Query/AlertsByUser.tsx';

const client = new GraphQLClient(API_GRAPHQL);

export const fetchAlertsByUserId = async (userId: string, token: string) => {
try {
const headers = {
Authorization: JWT ${token},
};
const variables = { userId };
const data = await client.request(QueryAPI.ALL_ALERTS_BY_USER, variables, headers);
console.log(data);

 return data;
} catch (error) {
 console.error("Error fetching alerts:", error);
 throw error;
}

};

and after that i create a componenet for each and map data

// src/components/alerts/AlertsByUser.js
import React, { useEffect, useState } from 'react';
import { fetchAlertsByUserId } from '../../backend/GraphQL/Resolvers/Query/AlertsByUser';
import { useAtom } from 'jotai';
import { userAtom } from '../../stores/userAtom';
import Cookies from 'js-cookie';

export const PageTwo = () => {
const [user] = useAtom(userAtom);
const [alerts, setAlerts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const getAlerts = async () => {
try {
const token = Cookies.get("access_token");
const alertsData = await fetchAlertsByUserId(user.id, token);
setAlerts(alertsData);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};

if (user.id) {
 getAlerts();
}

}, [user]);

if (loading) return

return (

but in my template i have

Error: GraphQL Error (Code: 400): {"response":{"status":400,"headers":{}},"request":{"query":"\n query AlertsByUserId($userId: String!) {\n alertsByUserId(userId: $userId) {\n id\n currentPrice\n targetPrice\n isOpen\n user {\n id\n firstName\n lastName\n }\n }\n }\n ","variables":{"userId":2}}}