useGraphqlForms payload not updating on user data entry after first update

[ACoolTurtle]

Description

On very complex data structures when using the useGraphqlForms hook, the payload component does not update after the first character has been entered by the user. It appears the be an issue of nested objects, but I may be wrong.

Steps to reproduce

Create a fairly complex JSON object and query it from Tina. Check how often the data is updated in conjunction to user data entry.

const [payload, isLoading] = useGraphqlForms<Query>({
    query,
    variables: {
        relativePath: `${slug}.json`,
    },
    formify: ({ createForm, formConfig }) => {
        return createForm(formConfig);
    },
});

useEffect(() => {
    console.log("PAYLOAD", payload?.getPageDocument?.data);
}, [JSON.stringify(payload?.getPageDocument?.data)]);

Example JSON to be queried:

{
    "slug": "/",
    "_template": "page",
    "seo": {
        "title": "Home",
        "description": "Description",
        "image": "/some/image",
        "lang": "en",
    },
    "menuLinks": [
        {
            "title": "Home",
            "path": "/"
        },
    ],
    "components": [
        {
            "template": "carousel",
            "images": [
                {
                    "image": "/images/image.jpg"
                },
            ],
            "height": 60,
            "fade": false,
            "fadeTime": 50,
            "fadeOnce": true,
            "delay": 300,
            "toggle_fade_direction": false
        },
        {
            "template": "title",
            "titleText": "Title",
            "fade": true,
            "fadeTime": 50,
            "fadeOnce": true,
            "delay": 300,
            "mdx": "### MDX String",
            "toggle_fade": false,
            "toggle_fade_direction": false
        },
        {
            "template": "link_grid",
            "fade": true,
            "fadeTime": 20,
            "fadeOnce": true,
            "delay": 300,
            "grid": [
                {
                    "titleText": "Title",
                    "description": "Description",
                    "link": "URL",
                    "image": "/images/image.jpg",
                    "mdx": "* MDXString",
                    "linkText": "TEXT"
                }
            ],
            "toggle_fade_direction": false
        }
    ]
}

Expected result

Data to change on every data entry

Actual result

No data change after the very first time the data has been entered. This only seems to come into effect when we are using multiple nested objects

Environment

Tinacms Package Versions

react-tinacms-editor@npm:0.41.1
react-tinacms-inline@npm:0.41.1
tinacms@npm:0.41.1

Tools

Tool | Version -- | -- browser | Chrome 91.0.4472.106 os | Windows 10, WSL 2 Ubuntu node | 15.7.0 npm | 7.4.3

[logan-anderson]

@ACoolTurtle Thanks again for all the reports! Just a couple things we need to reproduce this error.

1. Your schema.ts (and all relevant files (if its the same as the other issue I can get it from there) )
2. The graphql query you are using.

[ACoolTurtle]

@logan-anderson of course, it's the same query and schema as in #293. Sorry about all of the reports!

[logan-anderson]

@ACoolTurtle Don't be sorry about the reports! Thanks for finding them so we can fix them and make this product the best it can be.

Unfortunately I was not able to reproduce your error. What field are you editing where you are getting this behaviour?

On a side note: We are continuing to make Tina Cloud and Tina open source better and if you have time to chat we would love to hear about how you are finding the overall DX (whats good, whats bad, how can we improve).

Here is a calendar link if you want to book a 15-30min chat: https://calendly.com/logan-forestry/15min

[ACoolTurtle]

@logan-anderson It is honestly any field, the fields that come to mind are markdown and text fields though. This bug is very strange however, as I have 3 different page types and the bug is only present on one. My running theory is because of the multiple nested objects, but that's just a guess.

I would love to have a chat at some point, however I don't have much free time right now. Do you have a form I could fill out in the mean time?

[logan-anderson]

@ACoolTurtle Ill look into this more. You can go to this link and book directly into my calendar (pick anytime that works for you). https://calendly.com/logan-forestry/15min