web-dev-qa-db-ja.com

Apollo-clientは、サーバーにミューテーションを送信すると「400（Bad Request）Error」を返します

私は現在、Apolloクライアント用に vue-apollo パッケージを使用しており、VueJsスタックとDjango、Graphene-pythonをGraphQlAPIに使用しています。

以下のvue-apolloを使用した簡単なセットアップがあります。

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import Cookies from 'js-cookie'


const httpLink = new HttpLink({
  credentials: 'same-Origin',
  uri: 'http://localhost:8000/api/',
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

export const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

// Install the vue plugin
Vue.use(VueApollo)

また、Django settings.pyに Django-cors-headers パッケージを使用してCORSを設定しています。graphiQLまたはChrome用のInsomniaAPIクライアントですが、以下のミューテーションをmy vue app：

'''

import gql from "graphql-tag";
import CREATE_USER from "@/graphql/NewUser.gql";

export default {
  data() {
    return {
      test: ""
    };
  },
  methods: {
    authenticateUser() {
      this.$apollo.mutate({
        mutation: CREATE_USER,
        variables: {
          email: "[email protected]",
          password: "pa$$Word",
          username: "testuser"
        }
      }).then(data => {
          console.log(result)
      })
    }
  }
};

NewUser.gql

mutation createUser($email: String!, $password: String!, $username: String!) {
  createUser (username: $name, password: $password, email: $email)
  user {
    id
    username
    email
    password
  }
}

以下のエラー応答で戻ります。

POST http://localhost:8000/api/ 400 (Bad Request)

ApolloError.js?d4ec:37 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400

私のvueアプリでの定期的なクエリは、しかし、突然変異を除いて正しい応答を解決するためにうまく機能するので、これは私を本当に困惑させます

djangovue.jsgraphqlapollographene-python
3
Feyisayo Sonubi

400エラーは通常、クエリ自体に問題があることを意味します。この例では、$usernameという変数を定義しました（そして渡します）。ただし、クエリでは2行目でそれを$nameとして参照しています。

9
Daniel Rearden

GraphiQLに加えて、apollo-link-errorパッケージも大いに役立ったであろうことを付け加えたいと思います。エラーハンドラー{onError}をインポートすることで、ネットワークおよびアプリケーション（graphql）レベルで生成されたエラーに関する詳細をコンソールから取得できます。

import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    console.log('graphQLErrors', graphQLErrors);
  }
  if (networkError) {
    console.log('networkError', networkError);
  }
});

const httpLink = ...

const link = ApolloLink.from([errorLink, httpLink]);

const client = new ApolloClient({
  ...,
  link,
  ...
});

Apolloクライアントをインスタンス化する場所にこの構成を追加すると、次のようなエラーが発生します。

GraphQLError {メッセージ： "構文エラー：予期された{、見つかった名前" createUser ""}

詳細については、Apollo Doc-エラー処理： https://www.apollographql.com/docs/react/features/error-handling を参照してください。それが将来役立つことを願っています。

2
Renzo

それがまさにあなたが送っているものであるならば、確かに突然変異は正しくフォーマットされていません。突然変異には開き角かっこが必要です

mutation createUser($email: String!, $password: String!, $username: String!) {
  createUser (username: $name, password: $password, email: $email) {
    user {
      id
      username
      email
      password
    }
  }
}

これらのクエリのいずれかでバグが発生した場合、それをgraphiqlまたはgraphqlプレイグラウンドに貼り付けて、フォーマットエラーが何であるかを特定し、何が問題であるかを特定します。

2
Austio

私にとっては、GraphQLスキーマで定義されていないフィールドを使用していたという事実でした。常に注意してください！

0
cpit