设计表单构建器的数据库和状态变化和请求，以与 graphQL、faunaDB、nextJS 和 Apollo

如何解决设计表单构建器的数据库和状态变化和请求，以与 graphQL、faunaDB、nextJS 和 Apollo

我正在开发下一个 JS、React、Apollo、graphQL、faunaDB 应用程序。我正在尝试构建表单构建器如何通过 graphQL 处理它对动物群的突变。我能够从操场运行突变，并且可以从前端查询并构建我的表单。此处看到的互动https://www.loom.com/share/7f7d1e1231d445f2be6b5db2c81239b6

现在我很确定我可以弄清楚如何在前端运行一个突变，我关心的是什么时候运行它？请参阅我有以下代码。查询 faunaDB，并从状态（由查询填充）输出表单输入元素（当前只是文本类型的元素），并允许您向状态添加新的表单输入类型，从而导致重新渲染并显示新的表单输入元素。这一切都很好。

import { useQuery,gql } from "@apollo/client";
import { useEffect,useState } from "react";
import { v4 as uuidv4 } from "uuid";

const INPUT_VALUES = gql`
  query GetInputValues {
    allFormInputVals {
      data {
        name
        _id
        type
      }
    }
  }
`;

const Home = () => {
  const { loading,error,data } = useQuery(INPUT_VALUES);

  const [formState,setFormState] = useState(undefined);

  useEffect(() => {
    setFormState(data?.allFormInputVals?.data);
  },[data]);

  const addInput = () => {
    const blanktext = {
      __typename: "FormInputType",name: "Product Image",_id: uuidv4(),type: "text",};
    console.log(formState);
    setFormState([...formState,{ ...blanktext }]);
  };

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error: {error.message}</p>;

  return (
    <>
      <form>
        <input type="button" value="Add Form Input" onClick={addInput} />
        {formState?.map((val,idx) => {
          const nameId = `name-${idx}`;
          const typeId = `type-${idx}`;
          return (
            <div key={val._id}>
              {val.type === "text" && (
                <>
                  <label htmlFor={nameId}>{`Name #${idx + 1}`}</label>

                  <input
                    type="text"
                    name={nameId}
                    id={nameId}
                    className={val.type}
                  />
                  <label htmlFor={typeId}>{`Type #${idx + 1}`}</label>

                  <select name={typeId} id={typeId} className={val.type}>
                    {data.allFormInputVals.data.map((item) => {
                      return (
                        <option key={item._id} value={item.type}>
                          {item.type}
                        </option>
                      );
                    })}
                  </select>
                </>
              )}
            </div>
          );
        })}
      </form>
    </>
  );
};

export default Home;

然而，我在操场上的变异选项似乎仅限于一次只添加一个所谓的文档，即一个对象。如果我控制台记录我想添加到数据库的状态，它看起来如下。现在我可以在操场上做一个突变，在那里我可以添加这些对象之一。但我希望能够一次添加所有这些。在保存操作上。我想这样做是因为我不想运行对表单的每个添加的请求，我想使用反应状态来处理表单直到最后，然后执行我的数据库请求。

[
   {
      "__typename":"FormInputVal","name":"name","_id":"291541872966369805","type":"text"
   },{
      "__typename":"FormInputVal","_id":"291541888089981453","name":"Product Image","_id":"255f95e0-bff1-4e75-81fc-d6f3f9a72446","type":"text"
   }
]

现在我已经创建了一个具有用户的 graphQL 模式，它可以有很多表单，表单可以有很多输入。看起来是这样。 @relation 指令专用于 faunaDB。除了我一直提到的这个突变问题之外，它的工作方式符合我的预期。

type Form {
  name: String!
  index: Int!
  user: User
  formInputVals: [FormInputVal!] @relation
}

type FormInputVal {
  name: String!
  index: Int!
  type: String!
  formRoot: Form!
}

type User {
  name: String!
  email: String!
  password: String!
  forms: [Form] @relation
}

type Query {
  allForms: [Form!]
  allUsers: [User!]
  allFormInputVals: [FormInputVal!]
}

看到我可以用以下方法改变数据库。我选择一个特定的表单并添加一个输入，从而导致前端的重新渲染并显示表单输入。这一切都很好。这是该类型的一个示例变异。

mutation{
  createFormInputVal(data:
    {formRoot:{connect:"291541554941657608"},name:"name",type:"text",index:0}){
    name
    type
    index
    formRoot{
      name
    }
  }
}

但这就是问题的根源所在。

我想获取由 react 创建的状态，并将其添加到名为 formInputVal 的 faunaDB 集合中，graphql 架构映射到 db 集合。

我与 Fauna 支持人员进行了交谈，他们提到了一个 @resolver 指令，我可以在其中运行 DB 函数并一次添加多个文档（对象），到目前为止，faunaDB 的 lambda 函数语法超出了我的理解。他们提到这篇文章是针对函数 https://docs.fauna.com/fauna/current/tutorials/ecommerce#function 而这篇文章是针对解析器 https://forums.fauna.com/t/placing-an-index-on-a-field-in-an-embedded-type/778/4

让我们澄清一下，

我这样做对吗？我愿意更改架构。如果您想使用替代方法或相同的方法解决此问题，但缺少我不明白的部分，您会怎么做。

为什么我不能只将一组对象传递给正确的 formID 的突变，它会在一个查询中将那么多文档添加到集合中。是否有任何类型的通用实践来创建这样的生成形式。

好的，提前感谢您的帮助。

更新：

我尝试了以下突变，但它不起作用。它出现以下错误 UnkNown argument 'formInputVal' on field 'createFormInputVal' of type 'Mutation'

const ADD_INPUT_VALUES = gql`
  mutation AddInputValues($formInputVal: FormInputValInput!) {
    createFormInputVal(formInputVal: $formInputVal) {
      name
    }
  }
`;

const [createFormInputVal,{ data: createInputData }] = useMutation(
    ADD_INPUT_VALUES
  );

...
<form
        onSubmit={async (e) => {
          e.preventDefault();
          const res = await createFormInputVal({
            variables: formState,}).catch(console.error);
          console.log(res);
        }}
      >
...