使用 react-apollo 自定义 InputTypes

Posted 2023-03-10

【中文标题】使用 react-apollo 自定义 InputTypes

【英文标题】：Custom InputTypes with react-apollo

【发布时间】：2018-03-19 05:55:33

【问题描述】：

我正在尝试在客户端执行需要自定义输入类型的突变查询。目前它看起来像这样：

import  graphql  from 'react-apollo';
...
const graphQuery = graphql(gql`
  input UserSignUpInput 
    firstName: String!,
    lastName: String!,
    email: String!,
    password: String!
  
  mutation userSignUp($input: UserSignUpInput!) 
    createUserByEmail(input: $input) 
      authToken
    
  `, 
  props: ( mutate ) => (
    signup: (firstName, lastName, email, password) =>
      mutate( variables:  input:  firstName, lastName, email, password   ),
  ),
);
...

但是，我收到了不允许在查询中定义输入类型的错误。我的问题是：如何定义这些复杂的输入类型？我似乎无法为ApolloClient..提供架构。

【参考方案1】：

客户端端的正确语法是：

gql`
  mutation userSignUp($input: UserSignUpInput!) 
    createUserByEmail(input: $input) 
      authToken
    
  
`

由于您的输入 UserSignUpInput 是在服务器上定义的，所以一切正常。

服务器

input UserSignUpInput 
  firstName: String!,
  lastName: String!,
  email: String!,
  password: String!

【讨论】：

这个输入类型应该在哪里定义？在反应应用程序中，它抱怨语法！

如果使用 HotChocolate，如果您没有服务器，请务必将 Input 添加到客户端类型名称的末尾。例如，服务器类型为UserSignUp，客户端类型仍为UserSignUpInput，参见link