Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Sep 2, 2022. It is now read-only.

Commit cb03e33

Browse files
author
Chris Nelson
committed
INPUT_OBJECT args are working
1 parent 0b52a53 commit cb03e33

File tree

7 files changed

+84
-19
lines changed

7 files changed

+84
-19
lines changed

‎README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
# graphl-admin-react
22

33
This is a rewrite of [graphql-admin](https://github.com/gaslight/graphql-admin) in React. So far, basic queries and mutations including arguments
4-
are working. Next up will be InputObjects (which don't work yet).
4+
are working. InputObjects are also working. In fact at this point it's probably safe to say
5+
the react based version is farther along and more likely to be what I'll pursue going forward.
6+
7+
The only thing it doesn't support (that the previous version did)is mutations and queries that live
8+
in nested fields like on GraphqlHub. This is a lot of trouble and seems like a bit of an edge case and so I may not worry about it. PRs welcome of course :)
9+
10+
It's probably time to say this is an actual thing and start tracking issues.
511

612
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
713

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"version": "0.1.0",
44
"private": true,
55
"devDependencies": {
6+
"enzyme": "^2.6.0",
7+
"react-addons-test-utils": "^15.4.0",
8+
"react-dom": "^15.4.0",
69
"react-scripts": "0.7.0"
710
},
811
"dependencies": {

‎src/App.test.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/ArgsForm.js

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import { findInputFields } from './graphql_utils';
23

34
class ArgsForm extends Component {
45

@@ -8,18 +9,50 @@ class ArgsForm extends Component {
89
}
910

1011
argValueChange(name, value) {
11-
this.setState({argValues: Object.assign(this.state.argValues, {[name] : value })})
12+
if (Array.isArray(name)) {
13+
let argValues = this.state.argValues;
14+
let currentObject = argValues;
15+
name.forEach((path, index) => {
16+
if (index < (name.length - 1)) {
17+
currentObject[path] = currentObject[path] ? currentObject[path] : {};
18+
currentObject = currentObject[path];
19+
} else {
20+
currentObject[path] = value;
21+
}
22+
});
23+
this.setState({ argValues });
24+
} else {
25+
this.setState({argValues: Object.assign(this.state.argValues, {[name] : value })});
26+
}
27+
}
28+
29+
renderArgField(arg, prefix=[]) {
30+
console.log(arg);
31+
if (arg.type.kind == "INPUT_OBJECT") {
32+
return this.renderInputObjectFields(arg, prefix);
33+
} else {
34+
return this.renderSimpleArgField(arg, prefix);
35+
}
36+
}
37+
38+
renderInputObjectFields(arg, prefix=[]) {
39+
return findInputFields(this.props.schema, arg.type.name)
40+
.map( simpleField => this.renderArgField(simpleField, prefix.concat(arg.name)));
41+
}
42+
43+
renderSimpleArgField(arg, prefix=[]) {
44+
return (
45+
<div>
46+
<label>{arg.name}</label>
47+
<input name={arg.name} onChange={ (event)=> this.argValueChange(prefix.concat(arg.name) : arg.name, event.target.value)}/>
48+
</div>
49+
);
1250
}
1351

1452
render() {
1553
return (
1654
<form>
17-
{this.props.args.map((arg) =>
18-
<div>
19-
<label>{arg.name}</label>
20-
<input name={arg.name} onChange={ (event)=> this.argValueChange(arg.name, event.target.value)}/>
21-
</div>
22-
)}
55+
{this.props.args.map((arg) => this.renderArgField(arg))}
2356
<input type="button" value={this.props.buttonLabel} onClick={ () => this.props.onExecute(this.state.argValues) } />
2457
</form>
2558
);

‎src/ArgsForm.spec.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import ArgsForm from './ArgsForm';
4+
5+
it('sets argValues', () => {
6+
const wrapper = shallow(<ArgsForm args={[]}/>);
7+
const argsForm = wrapper.instance();
8+
argsForm.argValueChange(["foo"], "bar");
9+
expect(wrapper.state().argValues.foo).toEqual("bar")
10+
});
11+
12+
it('sets nested argValues', () => {
13+
const wrapper = shallow(<ArgsForm args={[]}/>);
14+
const argsForm = wrapper.instance();
15+
argsForm.argValueChange(["foo", 'baz'], "bar");
16+
argsForm.argValueChange(['foo', 'bing', 'wuzza'], 'donk');
17+
expect(wrapper.state().argValues.foo.baz).toEqual("bar")
18+
expect(wrapper.state().argValues.foo.bing.wuzza).toEqual("donk")
19+
});

‎src/Mutation.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,18 @@ const displayResult = (queryField, queryResult) => {
1010
return <QueryResult result={queryResult} />;
1111
};
1212

13-
const Mutation = ({params, mutationResultType, mutationField, executeMutation, mutationResult}) => {
13+
const Mutation = ({
14+
params,
15+
schema,
16+
mutationResultType,
17+
mutationField,
18+
executeMutation,
19+
mutationResult
20+
}) => {
1421
return (
1522
<div>
1623
<h3>{params.mutationName}</h3>
17-
<ArgsForm args={mutationField.args} onExecute={executeMutation} buttonLabel="Execute Mutation"/>
24+
<ArgsForm schema={schema}args={mutationField.args} onExecute={executeMutation} buttonLabel="Execute Mutation"/>
1825
{ mutationResult ? displayResult(mutationField, mutationResult) : '' }
1926
</div>
2027
);
@@ -24,7 +31,8 @@ const mapStateToProps = (state, ownProps) => {
2431
return {
2532
mutationField: findMutationField(getSchema(state), ownProps.params.mutationName),
2633
mutationType: findMutationType(getSchema(state), ownProps.params.mutationName),
27-
mutationResult: getQueryResult(state)
34+
mutationResult: getQueryResult(state),
35+
schema: getSchema(state)
2836
};
2937
}
3038

‎src/graphql_utils.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export const findMutationType = (schema, name) => {
2323
return findType(schema, findMutationField(schema, name).type.name);
2424
}
2525

26+
export const findInputFields = (schema, inputObjectType) => {
27+
return findType(schema, inputObjectType).inputFields;
28+
}
29+
2630
export const isListQuery = (queryField) => queryField.type.kind === "LIST";
2731

2832
export const findField = (type, name) => type.fields.find(field => field.name == name);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /