无法使用 Apollo 在前端改变数据

Posted 2023-03-10

【中文标题】无法使用 Apollo 在前端改变数据

【英文标题】：Not able to mutate data on the front end with Apollo

【发布时间】：2019-10-22 12:01:20

【问题描述】：

我正在尝试使用带有 GraphQl 的 Apollo 客户端在 React-Native 上构建一个预订应用程序

我无法在前端调用突变。

下面是一些带有架构的代码以及我的突变是什么样的。

我做错了什么？

架构：

createReservation(
  data: ReservationCreateInput!
): Reservation!
type Reservation
implements Node 
  id: ID!
  name: String!
  hotelName: String!
  arrivalDate: String!
  departureDate: String!

我的突变：

const addReservationMutation = gql`
  mutation createReservation(
    $data: 
      name: String!
      hotelName: String!
      arrivalDate: String!
      departureDate: String!
    )

   
     name
  
`;

包裹在 Mutation 组件中的按钮

<Mutation mutation=addReservationMutation>
      (addReservation,  data ) => (
        <Button
          title="Reserve your!"
          onPress=() => 
            addReservation(
              variables: 
                name: "Joe",
                hotelName: "LemonTree",
                arrivalDate: "06/05/2019",
                departureDate: "06/12/2019"
              
            );
          
        />
      )
    </Mutation>

错误：

Syntax Error: Expected Name, found 
74 Requiring module "index.js", which threw an exception: Syntax Error: Expected Name, found 

GraphQL request (3:12)
2:   mutation createReservation(
3:     $data: 
              ^
4:       name: String!


NativeModules @ RNDebuggerWorker.js:1
c @ RNDebuggerWorker.js:1
"index.js", which threw an exception: Syntax Error: Expected Name, found 

GraphQL request (3:12)
2:   mutation createReservation(
3:     $data: 
              ^
4:       name: String!

handleException @ 
c @ RNDebuggerWorker.js:1
…:74 Requiring module "index.js", which threw an exception: Syntax Error: Expected Name, found 

GraphQL request (3:12)
2:   mutation createReservation(
3:     $data: 
              ^
4:       name: String!

【问题讨论】：

请详细说明问题所在。您是否在控制台中看到错误？如果您检查开发工具下的网络选项卡，服务器的响应是什么？如果请求失败，来自服务器的响应通常会包含一个 errors 数组，其中包含有关问题所在的其他详细信息。请更新您的问题并提供更多信息。

出现错误更新

【参考方案1】：

当您需要对突变进行复合字段时使用输入类型，请检查

https://graphql.org/graphql-js/mutations-and-input-types/

您的架构、突变和代码应该与输入类型类似。

架构：

input ReservationInput 
  name: String!
  hotelName: String!
  arrivalDate: String!
  departureDate: String!

变异：

mutation createReservation($data: ReservationInput )
     name

组件：

<Mutation mutation=addReservationMutation>
      (addReservation,  data ) => (
        <Button
          title="Reserve your!"
          onPress=() => 
            addReservation(
              variables: 
                data: 
                  name: "Joe",
                  hotelName: "LemonTree",
                  arrivalDate: "06/05/2019",
                  departureDate: "06/12/2019"
               
              
            );
          
        />
      )
</Mutation>

【参考方案2】：

你的突变在我看来是错误的。是不是应该更像这样：

const addReservationMutation = gql`
  mutation onCreateReservation(
    $data: 
      name: String!
      hotelName: String!
      arrivalDate: String!
      departureDate: String!
    ) 
     createReservation(data: $data) 
       name
    
  
`;