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 3175360

Browse files
author
Chris Nelson
committed
queries work
1 parent e5edb5f commit 3175360

File tree

8 files changed

+182
-20
lines changed

8 files changed

+182
-20
lines changed

‎src/App.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import './App.css';
55
import { connect } from 'react-redux';
66
import { fetchSchemaAction } from './actions/fetchSchema';
77
import { extractQueries } from './graphql_utils';
8+
import { getSchema } from './reducers';
89

910
class App extends Component {
1011

@@ -32,8 +33,9 @@ class App extends Component {
3233
}
3334

3435
const mapStateToProps = (state) => {
36+
const schema = getSchema(state);
3537
return {
36-
queries: extractQueries(state)
38+
queries: schema ? extractQueries(schema) : []
3739
}
3840
};
3941

‎src/Query.js

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,46 @@
11
import React, { Component } from 'react';
22
import { connect } from 'react-redux';
3-
import { findQueryType } from './graphql_utils';
3+
import { findQueryType, findQueryField, isListQuery } from './graphql_utils';
4+
import { executeQueryAction } from './actions/executeQuery';
5+
import { getSchema, getQueryResult } from './reducers';
6+
import QueryResultsTable from './QueryResultTable';
7+
import QueryResult from './QueryResult';
8+
import QueryArgsForm from './QueryArgsForm';
49

5-
const Query = ({params, query}) =>
6-
(
10+
const displayQueryResult = (queryField, queryResult) => {
11+
if (isListQuery(queryField)) {
12+
return <QueryResultsTable results={queryResult} />;
13+
} else {
14+
return <QueryResult result={queryResult} />;
15+
}
16+
};
17+
18+
const Query = ({params, queryType, queryField, executeQuery, queryResult}) => {
19+
return (
720
<div>
821
<h3>{params.queryName}</h3>
9-
{ query.name }
22+
{ queryType.name }
23+
<QueryArgsForm queryArgs={queryField.args} onExecute={executeQuery} />
1024
<ul>
11-
{ query.fields.map(field => <li>{field.name}</li>)}
25+
{ queryType.fields.map(field => <li>{field.name}</li>)}
1226
</ul>
27+
{ queryResult ? displayQueryResult(queryField, queryResult) : '' }
1328
</div>
14-
)
29+
);
30+
};
1531

1632
const mapStateToProps = (state, ownProps) => {
1733
return {
18-
query: findQueryType(state, ownProps.params.queryName)
34+
queryField: findQueryField(getSchema(state), ownProps.params.queryName),
35+
queryType: findQueryType(getSchema(state), ownProps.params.queryName),
36+
queryResult: getQueryResult(state)
1937
};
2038
}
2139

22-
export default connect(mapStateToProps)(Query);
40+
const mapDispatchToProps = (dispatch, ownProps) => {
41+
return {
42+
executeQuery: (args) => dispatch(executeQueryAction(ownProps.params.queryName, args))
43+
}
44+
}
45+
46+
export default connect(mapStateToProps, mapDispatchToProps)(Query);

‎src/QueryArgsForm.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { Component } from 'react';
2+
3+
class QueryArgsForm extends Component {
4+
5+
constructor(props) {
6+
super(props);
7+
this.state = {argValues: {} };
8+
}
9+
10+
queryArgChange(name, value) {
11+
this.setState({argValues: Object.assign(this.state.argValues, {[name] : value })})
12+
}
13+
14+
render() {
15+
return (
16+
<form>
17+
{this.props.queryArgs.map((queryArg) =>
18+
<div>
19+
<label>{queryArg.name}</label>
20+
<input name={queryArg.name} onChange={ (event)=> this.queryArgChange(queryArg.name, event.target.value)}/>
21+
</div>
22+
)}
23+
<input type="button" value="Execute Query" onClick={ () => this.props.onExecute(this.state.argValues) } />
24+
</form>
25+
);
26+
}
27+
}
28+
29+
export default QueryArgsForm;

‎src/QueryResult.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { Component } from 'react';
2+
3+
const QueryResult = ({ result }) => {
4+
const fields = Object.keys(result);
5+
return (
6+
<table>
7+
<tbody>
8+
{ fields.map( field =>
9+
<tr>
10+
<td>{field}</td>
11+
<td>{result[field]}</td>
12+
</tr>
13+
)}
14+
</tbody>
15+
</table>
16+
);
17+
}
18+
19+
export default QueryResult;

‎src/QueryResultTable.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { Component } from 'react';
2+
3+
const QueryResultTable = ({ results }) => {
4+
const fields = Object.keys(results[0]);
5+
return (
6+
<table>
7+
<thead>
8+
<tr>
9+
{ fields.map( field => (<th>{field}</th>) ) }
10+
</tr>
11+
</thead>
12+
<tbody>
13+
{ results.map( result =>
14+
<tr>
15+
{ fields.map( field =>
16+
<td>{result[field]}</td>
17+
)}
18+
</tr>
19+
) }
20+
</tbody>
21+
</table>
22+
);
23+
}
24+
25+
export default QueryResultTable;

‎src/actions/executeQuery.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createAction } from 'redux-act';
2+
import { getSchema } from '../reducers';
3+
import { buildQuery } from '../graphql_utils';
4+
5+
export const queryExecutedAction = createAction('queryExecuted');
6+
7+
export const executeQueryAction = (queryName, args) => {
8+
console.log('executing query' + queryName);
9+
return (dispatch, getState, client) => {
10+
console.log('in thunk');
11+
const schema = getSchema(getState());
12+
client.query({
13+
query: buildQuery(schema, queryName, args),
14+
variables: args
15+
}).then((result) => {
16+
console.log(result);
17+
dispatch(queryExecutedAction(result.data[queryName]));
18+
});
19+
};
20+
};

‎src/graphql_utils.js

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,59 @@
1+
import gql from 'graphql-tag';
12

23
export const findType = (schema, name) => {
34
return schema.types.find(type => type.name === name);
45
};
56

6-
export const extractQueries = (state) => {
7-
return state.graphql && state.graphql.schema ?
8-
findType(state.graphql.schema, state.graphql.schema.queryType.name).fields : [];
7+
export const extractQueries = (schema) => {
8+
const queryType = findType(schema, schema.queryType.name);
9+
console.log(queryType);
10+
return queryType.fields;
911
};
1012

11-
const isListQuery = (queryField) => queryField.type.kind === "LIST";
13+
exportconst isListQuery = (queryField) => queryField.type.kind === "LIST";
1214

13-
export const findQueryType = (state, name) => {
14-
const queries = extractQueries(state);
15-
const queryField = queries.find(field => field.name === name);
15+
export const findQueryField = (schema, name) => {
16+
const queries = extractQueries(schema);
17+
return queries.find(field => field.name === name);
18+
};
19+
20+
export const findQueryType = (schema, name) => {
21+
const queryField = findQueryField(schema, name);
1622
if (isListQuery(queryField)) {
17-
return findType(state.graphql.schema, queryField.type.ofType.name);
23+
return findType(schema, queryField.type.ofType.name);
1824
} else {
19-
return findType(state.graphql.schema, queryField.type.name);
25+
return findType(schema, queryField.type.name);
2026
}
21-
// return findType(state.graphql.schema, queryField.type.name);
2227
};
28+
29+
const argsWithValues = (queryArgs, argValues) => {
30+
return queryArgs.filter(queryArg => argValues[queryArg.name] && argValues[queryArg.name] !== '');
31+
};
32+
33+
const declareArgumentVariables = (queryArgs, argValues) => {
34+
let declarations = argsWithValues(queryArgs, argValues)
35+
.map((arg) => {
36+
return `$${arg.name}: ${arg.type.kind === 'NON_NULL' ? `${arg.type.ofType.name}!` : arg.type.name}`
37+
});
38+
return declarations.length > 0 ? `(${declarations.join(', ')})` : '';
39+
};
40+
41+
const argumentVariables = (queryArgs, argValues = {}) => {
42+
const argVariables = argsWithValues(queryArgs, argValues)
43+
.map((arg) => `${arg.name}: $${arg.name}`);
44+
return argVariables.length > 0 ? `(${argVariables.join(', ')})` : '';
45+
};
46+
47+
const isScalar = (field) => field.type.kind === "SCALAR";
48+
49+
export const buildQuery = (schema, queryName, args) => {
50+
console.log(schema, queryName, args);
51+
const queryArgs = findQueryField(schema, queryName).args;
52+
return gql`
53+
query doIt${declareArgumentVariables(queryArgs, args)} {
54+
${queryName}${argumentVariables(queryArgs, args)} {
55+
${findQueryType(schema, queryName).fields.filter(isScalar).map(field => field.name).join(", ")}
56+
}
57+
}
58+
`;
59+
}

‎src/reducers/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { createReducer } from 'redux-act';
22
import { fetchSchemaAction, schemaFetchedAction } from '../actions/fetchSchema';
3+
import { queryExecutedAction } from '../actions/executeQuery';
34

45
const initialState = {};
56

7+
export const getSchema = (state) => state.graphql.schema
8+
export const getQueryResult = (state) => state.graphql.queryResult
69

710
export const graphql = createReducer({
8-
[schemaFetchedAction]: (state, schema) => Object.assign(state, { schema })
11+
[schemaFetchedAction]: (state, schema) => Object.assign(state, { schema }),
12+
[queryExecutedAction]: (state, queryResult) => {
13+
return Object.assign(state, { queryResult });
14+
}
915
}, initialState);

0 commit comments

Comments
(0)

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