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

Posted 2023-03-08

【中文标题】将 Strapi 连接到 NextJS/Apollo 客户端 GraphQL - 未提供所需类型“XXX”的变量“$input”

【英文标题】：Connecting Strapi to NextJS/Apollo Client GraphQL -- Variable "$input" of required type 'XXX' was not provided

【发布时间】：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

【参考方案1】：

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

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