Hi I'm quite new to GRANDstack but so far it's been quite enjoyable. As of right now I am trying to create a new node in my database with a relation and fill out its properties.
Right now I am attempting to construct a Definition from my front end. In order for a definition to be complete we require the following:
- A title
- A
Sectionthat it is related byDEFINITION_OF - A list of other definitions that are used in the current definition. (
USED_BY)
Here is the section of the schema that will put this into context
type Section {
title: String!
definitions: [Definition] @relation(name: "DEFINITION_OF", direction: IN)
theorems: [Theorem] @relation(name: "THEOREM_OF", direction: IN)
}
type Definition {
title: String!
content: String
definitionsUsed: [Definition] @relation(name: "USED_BY", direction: IN)
}
I am using the auto generated resolvers that neo4j-graphql.js has made for me. So in order to complete the three steps, I need to use the following.
Now in the front end I am trying to figure out how I can do these three actions when then "create definition" button is pressed.
So far I have the following queries defined:
const CREATE_DEFINITION = gql`
mutation CreateDefinition($title: String!, $content: String!) {
CreateDefinition(title: $type, content: $content) {
title
content
}
}
`;
const CONNECT_DEF_TO_SEC = gql`
mutation DefToSec($di: _DefinitionInput, $si: _SectionInput) {
AddSectionDefinitions(from: $di, to: $si) {
from {
title
}
to {
title
}
}
}
`;
const ADD_DEF_USED = gql`
mutation DefUsed($df: _DefinitionInput, $dt: _DefinitionInput) {
AddDefinitionDefinitionsUsed(from: $df, to: $dt) {
from {
title
}
to {
title
}
}
}
`;
And then I was going to an example from: Mutations in Apollo Client - Apollo GraphQL Docs, just doing three different mutations in sequence. Although I was a little confused on how where I would do my three ... useMutation(...) calls, as in their example they something like this (sections omitted for brevity):
const GET_TODOS = gql`
query GetTodos {
todos {
id
}
}
`;
function AddTodo() {
let input;
const [addTodo] = useMutation(ADD_TODO, {
...
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
addTodo({ variables: { type: input.value } });
input.value = "";
}}
...
}
And my code is a react class like this:
class NewDefinitionForm extends React.Component {
constructor(props) {
....
}
handleChange(event) {
this.setState({inputValue: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
// defs_used = this.duValue.split(',');
event.preventDefault();
}
render() {
return (
<div>
<h4>Create a new definition:</h4>
<form onSubmit={this.handleSubmit}>
<label>
Title:
<input type="text" value={this.state.inputValue} onChange={this.handleChange} />
Content:
<textarea value={this.state.taValue} onChange={this.handleChange} />
Definitions Used:
<textarea value={this.state.duValue} onChange={this.handleChange} />
</label>
<input type="submit" value="Create" />
</form>
</div>
);
}
}
And so everything is a method inside of it, so I'm not to sure "when" to make those ...useMutation(...) calls. (this could be the total wrong approach anyways)
At this point, I haven't seen people doing multiple queries at once, and was thinking it might be a better idea to move this logic to one custom mutation in my schema.
I just wanted to have some support/feedback on what the best decision is here. Thanks so much!
