Apollo + React 在执行突变时给了我 400 错误。可能的 httpLink 错误

Posted 2023-03-08

【中文标题】Apollo + React 在执行突变时给了我 400 错误。可能的 httpLink 错误

【英文标题】：Apollo + React gives me a 400 error when performing a mutation. Possible httpLink error

【发布时间】：2021-04-12 06:09:11

【问题描述】：

出于一个奇怪的原因，我每次执行突变时都会收到400 代码。

这是我的 httpLink 代码

// ApolloProvider.js
const httpLink = createHttpLink(
    uri: 'http://localhost:3000/graphql',
);

const client = new ApolloClient(
    link: httpLink,
    cache: new InMemoryCache(),
);

然后我将其应用到下面的同一文件中

// ApolloProvider.js
export default function ApllProvider(props) 
    return <ApolloProvider client=client>props.children</ApolloProvider>;

谈到 GraphQL，我完全是新手，所以我很感激帮助。在服务器上一切正常，我正在提交我知道在服务器上工作的相同值。

我的一个突变看起来像这样

//Login.js
const LOGIN = gql`
    mutation login($email: String!, $password: String!) 
        login(email: $email, password: $password) 
            id
            token
            firstName
            profileLink
        
    
`;

以上，要将我的值提交到我的服务器，我正在做

//Login.js
const formik = useFormik(
        initialValues: 
            email: '',
            password: '',
        ,
        validationSchema,
        onSubmit: (values) => 
            formik.isSubmitting = true;
            loginUser(
                variables:  email: values.email, password: values.password ,
            );
            formik.isSubmitting = false;
        ,
    );

    const [loginUser,  loading, error ] = useMutation(LOGIN, 
        onError(err) 
            console.log(err);
        ,
    );

【问题讨论】：

你有没有查看开发者工具中的网络错误日志？

是的。它表明这是阿波罗本身的错误Error: Network error: Response not successful: Received status code 400 at new ApolloError (ApolloError.ts:46)

因为下一个错误连接到QueryManager.ts，和Observable.js（应该是Apollo的内部模块）。

【参考方案1】：

所以这个很简单。我要求一个未在我的类型上定义的属性。一旦我删除它，一切都开始工作了。

我通过转到 Chrome 中的“网络”选项卡并检查了一个名为“graphql”的请求，发现了问题所在。