Bug? Wrong post data sent compared to Apollo form

[charlypoly]

Bug? Wrong post data sent compared to Apollo form

[charlypoly]

Hi @Richard87,
Thanks for the issue!

Have you tried to pass variables: { ... } to the config.mutation prop of <ApplicationForm>?

[Richard87]

Hi, thanks for answering so fast ;)

I tried this, but it had no effect, so I'm not sure how it's supposed to look?

                <ApplicationForm
                    title="Create site form"
                    liveValidated={true}
                    noHtml5Validate={true}
                    config={{
                        mutation: {
                            name: 'createSite',
                            document: createSiteMutationDocument,
                            variables: {clientMutationId: 1}
                        },
                        saveData: data => {
                            console.log('save !', data);
                        }
                    }}
                />

[charlypoly]

Looks like there is a bug in the JSON Schema based on your GraphQL API Schema.

Could you send me your apollo-form-json-schema.json so I could take a look?

(send me privately if you want to [email protected] (even just the concerned mutation part))

Cheers,

[charlypoly]

As a workaround, until a fix is found and delivred, you can try to Build a form without a mutation 😉

[Richard87]

Hi!

Here is my apollo-form-json-schema.json:)

https://pastebin.com/W7P6TAHZ

[charlypoly]

Can you also provide your GraphQL Schema? Cheers,

On Sun 29 Jul 2018 at 13:40, Richard Hagen ***@***.***> wrote: Hi! Here is my apollo-form-json-schema.json:) https://pastebin.com/W7P6TAHZ — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#12 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABMa4lv_6K3wArx_daa9S2mHvQvc34EMks5uLZ8VgaJpZM4VSkL-> .

--

…

--- Charly POLY

[Richard87]

Ps, The schema is produced by API-Platform (https://github.com/api-platform/api-platform)

[Richard87]

Hi! I Updated everything...

apollo-form-sjon-schema.json: https://pastebin.com/kSaQj3dD
schema.json: https://pastebin.com/LRJTf2aM

Richard

[Richard87]

My current code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {ApplicationForm} from "./ApplicationForm";
import gql from 'graphql-tag'

const createSiteMutationDocument = gql`
    mutation createSite($clientMutationId: String!, $domain: String!) {
        createSite(input: {clientMutationId: $clientMutationId,domain: $domain}) {
            id
        }
    }
`;

ReactDOM.render(
    <ApplicationForm
        title="Todo Form"
        liveValidate={true}
        config={{
            mutation: {
                name: 'createSite',
                document: createSiteMutationDocument
            }
        }}
    />
    , document.getElementById('root'));
registerServiceWorker();

My ApplicationForm:

import * as React from 'react';
import { configure } from 'react-apollo-form';
import { client } from './apollo'; // a file thats export a configured Apollo Client
import jsonSchema from './forms/apollo-form-json-schema.json';

export const ApplicationForm = configure({
    client: client,
    jsonSchema
});

Request:

{
  "operationName": "createSite",
  "variables": {
    "input": {
      "domain": "testtest",
      "openingHours": [],
      "clientMutationId": "4"
    }
  },
  "query": "mutation createSite($clientMutationId: String!, $domain: String!) {\n  createSite(input: {clientMutationId: $clientMutationId, domain: $domain}) {\n    id\n    __typename\n  }\n}\n"
}

Response:

{
  "errors": [
    {
      "message": "Variable \u0022$clientMutationId\u0022 of required type \u0022String!\u0022 was not provided.",
      "category": "graphql",
      "locations": [
        {
          "line": 1,
          "column": 21
        }
      ]
    },
    {
      "message": "Variable \u0022$domain\u0022 of required type \u0022String!\u0022 was not provided.",
      "category": "graphql",
      "locations": [
        {
          "line": 1,
          "column": 49
        }
      ]
    }
  ]
}

Repository: https://github.com/Richard87/test-apollo-form

[Richard87]

Okay, if I use this qql, it works (just custom input variables etc fails):

    mutation createSite($input: createSiteInput!) {
        createSite(input: $input) {
            id
        }
    }

[charlypoly]

Hi @Richard87,

Yes I had the same conclusion after comparing you GQL schema and generated JSON Schema.

Indeed, the mutation document passed to <ApplicationForm> should use identical arguments as those accepted by the API corresponding mutation.

This point is not clear and the documentation and of course you feature proposal - generate this query document for you - would make this easier!

Sorry for the lack of documentation on this subject and thanks for pointing it out! 🙇

[Richard87]

No problem. But I think the posibility to generate my own mutation with the specific fields I want would be good to have? Then it would be easier to generate the "layout" i want in the DOM...

For example in the example over, I don't want opening hours, but that might be solved by "ignore fields" :)

Also, I appreciate the quick feedback, I really love the concept of this library and hopefully one day I could contribute more than just opening issues :D