use graphql query and mutation in same file

Question

    const QUERIES = gql`
    query {
    getGrades {
        grade_info
        id
    }

    getSubjects {
        id
        subject_info
    }

    getSchools {
        school_name
        id
    }
    }
    `;

    const MUTATIONS = gql`
    mutation {
        createTeacher(
        first_name: ${firstName}
        last_name: ${lastName}
        phone: "${number}
        email: ${email}
        subjectRef: ["6287323efe0b204eee241cc5"]
        gradeRef: ["62872b8b0023e0dcc9c5a703"]
        schoolRef: "62ab59edde044d104f10e5a9"
        ) {
        id
        first_name
        last_name
        phone
        email
        email_verified
        approved
        number_verified
        }
    }
    `;

    const { loading, error, data } = useQuery(QUERIES);
    const [mutateFunction, { data, loading, error }] = useMutation(MUTATIONS);

Here is my graphql query using in react . But my data variable conflicting in query and mutation

How to handle the situation ?

Please take a look .

If am changing data to something else it is not working.

Answer 1

You are using a destructuring assignment in order to extract the fields data, error, loading from the response of useQuery and useMutation. The destructuring assingment operator allows renaming the variables (please find better variable names than I used as an example ;-) )

Example:

const { loading: loadingQueries, error: errorQueries, data: dataQueries } = useQuery(QUERIES);

//use
console.log(loadingQueries);

The same can be applied for useMutation.