Skip to content
Snippets Groups Projects
Commit 2dcc862e authored by kevinle350's avatar kevinle350
Browse files

Backend connected to Frontend, TestingQueries and TestingMutation files used...

Backend connected to Frontend, TestingQueries and TestingMutation files used to test fetching queries and generating data success. Next: Integrate to actual application, save generated mutations onto data file
parent 8e445d85
No related branches found
No related tags found
No related merge requests found
...@@ -10,7 +10,7 @@ const PlantType = new GraphQLObjectType({ ...@@ -10,7 +10,7 @@ const PlantType = new GraphQLObjectType({
name: 'Plant', name: 'Plant',
description: 'This represents a plant', description: 'This represents a plant',
fields: () => ({ fields: () => ({
id: { type: GraphQLNonNull(GraphQLInt) }, // id: { type: GraphQLNonNull(GraphQLInt) },
plantName: { type: GraphQLNonNull(GraphQLString) }, plantName: { type: GraphQLNonNull(GraphQLString) },
maxWaterUsage: { type: GraphQLNonNull(GraphQLString) }, // might need to change to int later maxWaterUsage: { type: GraphQLNonNull(GraphQLString) }, // might need to change to int later
minMoistureLevel: { type: GraphQLNonNull(GraphQLString) }, minMoistureLevel: { type: GraphQLNonNull(GraphQLString) },
......
import {gql} from '@apollo/client';
export const CREATE_PLANT_MUTATION = gql`
mutation createPlant($plantName: String! $maxWaterUsage: String! $minMoistureLevel: String! $hours: String!) {
createPlant(plantName: $plantName maxWaterUsage: $maxWaterUsage minMoistureLevel: $minMoistureLevel hours: $hours) {
plantName
maxWaterUsage
minMoistureLevel
hours
}
}
`
\ No newline at end of file
import {gql} from '@apollo/client';
export const PLANTS_QUERY = gql`
query {
plants {
id
plantName
maxWaterUsage
minMoistureLevel
hours
}
}
`
import React, { useState } from "react";
import { CREATE_PLANT_MUTATION } from "../GraphQL/Mutations";
import { useMutation } from "@apollo/client";
function Form() {
const [plantName, setPlantName] = useState("");
const [maxWaterUsage, setMaxWaterUsage] = useState("");
const [minMoistureLevel, setMinMoistureLevel] = useState("");
const [hours, setHours] = useState("");
const [createPlant, { error }] = useMutation(CREATE_PLANT_MUTATION);
const addPlant = () => {
createPlant({
variables: {
plantName: plantName,
maxWaterUsage: maxWaterUsage,
minMoistureLevel: minMoistureLevel,
hours: hours,
},
});
if (error) {
console.log(error);
}
};
return (
<div>
<input
type="text"
placeholder="Plant Name"
onChange={(e) => {
setPlantName(e.target.value);
}}
/>
<input
type="text"
placeholder="Max Water Usage"
onChange={(e) => {
setMaxWaterUsage(e.target.value);
}}
/>
<input
type="text"
placeholder="Min Moisture Level"
onChange={(e) => {
setMinMoistureLevel(e.target.value);
}}
/>
<input
type="text"
placeholder="Hours"
onChange={(e) => {
setHours(e.target.value);
}}
/>
<button onClick={addPlant}> Create Plant</button>
</div>
);
}
export default Form;
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import { useQuery, gql } from '@apollo/client';
import { PLANTS_QUERY } from '../GraphQL/Queries';
function GetPlants() {
const [plants, setPlants] = useState([])
const {error, loading, data} = useQuery(PLANTS_QUERY)
useEffect(() => {
if (data) {
setPlants(data.plants)
}
}, [data])
return (
<div>
{plants.map((val) => {
return <h1>{val.plantName}</h1>
})}
</div>
)
}
export default GetPlants;
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment