将 Strapi 连接到 NextJS/Apollo 客户端 GraphQL - 未提供所需类型“XXX”的变量“$input”答案

【问题标题】：Connecting Strapi to NextJS/Apollo Client GraphQL -- Variable "$input" of required type 'XXX' was not provided将 Strapi 连接到 NextJS/Apollo 客户端 GraphQL - 未提供所需类型“XXX”的变量“$input”
【发布时间】：2020-05-29 09:45:57
【问题描述】：

请原谅，这是非常基本的，但我已经有一年左右没有使用 GraphQL 了，我错过了显而易见的东西。我正在尝试使用 GraphQL 将 Strapi 后端连接到 NextJS/Apollo 客户端前端，而基本语法却让我望而却步。（这是我们正在进行的项目的“概念证明”，只是为了看看我们是否可以在我们的用例中使用 Strapi、NextJS 和富文本编辑器）

Strapi 为我提供了createPost 端点

据我所知，我需要发送一个对象，该对象的字段为 data，其中包含我的文本。我正在使用 TinyMCE 的编辑器来编辑文本并使用 apollo 挂钩来获取突变

const TheEditor = () => {
    const [addPost, {data}] = useMutation(ADD_POST);
    const [theText, setText] = useState('')

    const handleEditorChange = (content, editor) => {
        console.log('Content was updated:', content);
        setText(content)
    }

    return <>
        <Editor apiKey='4564654765476547654'
                initialValue="<p>This is the initial content of the editor</p>"
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist autolink lists link image charmap print preview anchor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetimse media table paste code help wordcount'
                    ],
                    toolbar:
                        'undo redo | formatselect | bold italic backcolor | \
                        alignleft aligncenter alignright alignjustify | \
                        bullist numlist outdent indent | removeformat | help'
                }}
                onEditorChange={handleEditorChange}
        />
        <button onClick={async e => {
            e.preventDefault();
            await addPost({variables: {data:theText}});
        }}>ENTER
        </button>

    </>
}

export default withApollo(TheEditor);

我的突变是

const ADD_POST = gql`
      mutation ADD_POST($input: createPostInput!) {
        createPost(input: $input) {
          post {
          text 
          }
        }
      }
`;

但我得到了错误

很明显，问题是我需要重新学习 GraphQL 语法的基础知识。与此同时，我希望有人能指出我的方式中的（严重的）错误。我一直在关注 Apollo 教程 here，但我似乎无法从他们的代码跳转到我的代码。非常感谢任何帮助。

【问题讨论】：

variables 应该包含此突变的 input 属性，而不是 data

标签： graphql tinymce react-apollo apollo-client strapi

【解决方案1】：

你的变量名是输入而不是数据

<button onClick={async e => {
                e.preventDefault();
                await addPost({variables: { input:theText }});
            }}>ENTER
</button>

【讨论】：