pauljonescodes
commented
4 years ago (I also tried rolling back my version to 2.6.2 but that just resulted in a crash at runtime)
Closed pauljonescodes closed 4 years ago
pauljonescodes
commented
4 years ago (I also tried rolling back my version to 2.6.2 but that just resulted in a crash at runtime)
pauljonescodes
commented
4 years ago If you set Graphql to 14 it works, I'm sure 15 will be supported eventually.
radekmie
commented
4 years ago Hi @PLJNS. There's a few points here:
GraphQLInputObjectType and GraphQLObjectType. However, I'm planning to revise the way how field resolving works in GraphQLBridge and then it may change to GraphQLType (returned from getType).pauljonescodes
commented
4 years ago Ah ha, I understand, thank you for the clarification. It doesn't make much difference to me whether or not I use 14 or 15 for now, but I do prefer using the latest version obviously if at all possible. I look forward to your next publish.
Should it interest you, this is my latest solution to use uniforms in my project:
import { buildASTSchema, GraphQLInputObjectType, parse } from "graphql";
import React from "react";
import { AutoForm } from "uniforms-bootstrap4";
import { GraphQLBridge } from "uniforms-bridge-graphql";
type GraphQLAutoFormProps<T> = {
schemaString: string;
typeName: string;
onSubmit: (entity: T) => void;
};
const GraphQLAutoForm: <T>(
p: GraphQLAutoFormProps<T>
) => React.ReactElement<GraphQLAutoFormProps<T>> = (props) => {
const astSchema = buildASTSchema(parse(props.schemaString));
const schemaType = astSchema.getType(props.typeName);
const schemaValidator = () => {};
const schemaData = {};
const bridge = new GraphQLBridge(
schemaType as GraphQLInputObjectType,
schemaValidator,
schemaData
);
return <AutoForm schema={bridge} onSubmit={props.onSubmit} />;
};
export default GraphQLAutoForm;At the call site, it looks like this:
import React from "react";
import {
CustomerUpdateInput,
useUpdateCustomerMutation,
} from "../../../graphql/codegen";
import GraphQLAutoForm from "../../shared/GraphQLAutoForm";
type CustomerUpdatePageProps = {
id: string;
refetch: Function;
};
export const CustomerUpdatePage: React.FC<CustomerUpdatePageProps> = (
props
) => {
const [
updateCustomerMutation,
{ data, loading, error },
] = useUpdateCustomerMutation({});
return (
<GraphQLAutoForm
schemaString={`input CustomerUpdateInput {
fullName: String!
email: String
password: String
}`}
typeName="CustomerUpdateInput"
onSubmit={async (entity: CustomerUpdateInput) => {
await updateCustomerMutation({
variables: { id: props.id, input: entity },
});
props.refetch();
}}
/>
);
};I'm thrilled with this functionality, but think it could be improved. Here is a list of things I'm considering, which may be useful to you in how you develop your fantastic library:
I understand both of these element are perhaps more related to GraphQL than Uniforms, but there they are for your consideration. One thing I've considered is perhaps converting my generated Typescript types into JSON schema at runtime ... but that's not perfect either. It strikes me it must be possible to consume the GraphQL schema and pass typename at runtime from the filesystem, but I cannot immediately see the path there. Any help on this front is much appreciated, but obviously a bit outside the concern for your library, which again is brilliant.
Thank you for the help and I'll stay tuned.
radekmie
commented
4 years ago With #787 it'll be easier as the bridge accepts a GraphQLType now. Regarding other questions:
.gql/.graphql file directly is not possible as uniforms are supposed to work in browser. If your bundler supports that, you can do something like:
import schema from 'schema.graphql';
const bridge = new GraphQLBridge(schema.getType(typeName), ...);Which is at least a little better.
.getTypeMap(): TypeMap (.getType uses that underneath). If it's an object with only one key, use that key.parse and buildASTSchema can take a while (that's why it's recommended to do it as a built step).
I'm trying to build a form using AutoForm from a bare bones schema, I think I have a very minimal example:
But it results in the follow error:
It's because typescript seems to be expecting
isTypeOf, getFields, getInterfaces, why is that? Is there a version of Graphql that does work? I'm using 15.3.0.My package.json file:
Is this fixed by the latest commit? Is there a way I can specify this in my package.json file? When will the next release be?
I really like your idea and look forward to getting it working one way or another in the coming days, thank you for any help.