2

我正在尝试创建一个突变，但我不断收到一个 POST 正文丢失。我可以在调用 urql 和 codegen 钩子之前记录数据，并且我可以在错误的变量中看到数据，但是 chrome 不断出现“POST body missing”错误，并且服务器的解析器永远不会被命中。

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

这是我的代码：

突变定义（用于 codegen）

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 (same error)

  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) 
}

这是我的 typeDefs 和解析器：

类型定义

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 很陌生，非常感谢提前帮助我了解我做错了什么。

4

1 回答 1

5

在 apolloServer 配置中添加以下内容

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

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

于 2021-10-17T17:51:03.270 回答