GraphQL：缺少 POST 正文，內容類型無效，或者 JSON object 沒有密鑰

Question

我正在嘗試創建一個突變，但我一直收到缺少 POST 正文的信息。 我可以在調用 urql 和 codegen 掛鈎之前記錄數據，我可以在錯誤的變量中看到數據，但是 chrome 不斷崩潰並出現“POST body missing”錯誤並且服務器的解析器永遠不會被命中。

我在 React 客戶端上使用 Urql 和 Codegen，並在 Express API 上使用 Apollo-server。

這是我的代碼：

突變定義（用於代碼生成）

mutation UserLogin($email: String!, $password: String!) {
  login(email: $email, password: $password) {
    errors {
      email {
        error
        isValid
      }
      password {
        error
        isValid
      }
    }
    token
  }
}

代碼生成輸出：

export const UserLoginDocument = gql`
    mutation UserLogin($email: String!, $password: String!) {
  login(email: $email, password: $password) {
    errors {
      email {
        isValid
        error
      }
      password {
        isValid
        error
      }
    }
    token
  }
}
    `;

export function useUserLoginMutation() {
  return Urql.useMutation<UserLoginMutation, UserLoginMutationVariables>(UserLoginDocument);
};

使用這個鈎子失敗，所以我嘗試直接使用urql： useMutation Hook （同樣的錯誤）

  const [, executeMutation] = useMutation(`
      mutation($email: String!, $password: String!) {
        login(email: $email, password: $password) {
          errors {
            email {
              error
              isValid
            }
            password {
              error
              isValid
            }
          }
          token
        }
      }
  `);

我已經確認我可以使用原始提取來執行查詢：

async function fetchGraphQL(text: any, variables: any, token: string = '') {
  const response = await fetch('http://localhost:4000/graphql', {
    method: 'POST',
    headers: {
      Authorization: `bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: text,
      variables,
    }),
  });
  return await response.json();
}

但是，嘗試通過 codegen 或僅使用 urql 的 useMutation 掛鈎生成掛鈎會導致：

{
...
  "source": {
  "body": "mutation ($email: String! $password: String!) { login(email: $email password: $password) { errors { email { error isValid } password { error isValid } } token } }",
...
        },
        "variables": {
            "email": "...",
            "password": "..."
        },
        "kind": "mutation",
        "context": {
            "url": "http://localhost:4000/graphql",
            "preferGetMethod": false,
            "suspense": false,
            "requestPolicy": "cache-first",
            "meta": {
                "cacheOutcome": "miss"
            }
        }
    },
    "error": {
        "name": "CombinedError",
        "message": "[Network] Bad Request",
        "graphQLErrors": [],
        "networkError": {},
        "response": {}
    }
}

我有另一個非常簡單的突變，效果很好：

mutation SetActiveChild($childId: String!) {
  setActiveChild(childId: $childId) 
}

這是我的 typeDef 和解析器：

類型定義

export const typeDefs = gql`
  ...
  type Mutation {
    "user login"
    login(email: String!, password: String!): LoginResponse
  }
  ...
`

解析器

export const resolvers = {
  Query: {
    ...
  },
  Mutation: {
    login: ({}, user: UserRegister) => {
      return AuthGraph.login(user);
    },
    ...
  },
};

我是 GraphQL 的新手，非常感謝您幫助我理解我做錯了什么。

Answer 1

我遇到了這個問題，結果發現在我的請求 Header 中，我的Content-Type被設置為text/html; charset=utf-8 text/html; charset=utf-8一旦我將其更改為application/json問題就解決了

Answer 2

將以下內容添加到 apolloServer 配置中

// This middleware should be added before calling `applyMiddleware`.
  app.use(graphqlUploadExpress());

參考： https : //www.apollographql.com/docs/apollo-server/data/file-uploads/