0

我对中继和 GraphQL 非常陌生，并且希望模拟添加突变后的行为，我的组件会使用新的突变进行更新。例如，当我添加动物时，它会显示在我的动物列表中。

我已经阅读了一些关于通过乐观更新、获取容器等手动更新存储的内容，但是想知道这种行为是否可以通过仅使用 QueryRenderer HOC 和简单的突变来发生。

突变成功，但是我只能在刷新该页面后才能看到更新。

这是根查询渲染的代码：

export const Customer = ({ userId }) => {
  return (
    <QueryRenderer
      environment={environment}
      query={query}
      variables={{ userId }}
      render={({ error, props }) => {
        //handle errors and loading
        const user = props.customers_connection.edges[0].node
        return (
          <div className="flex justify-between items-center">
            <h1 className="text-xl">Pets</h1>
            <AddPetForm />
            <PetList user={user} />
          </div>
        )
      }}
    />
  )
}

const query = graphql`
  query CustomerQuery($userId: bigint) {
    customers_connection(where: { userId: { _eq: $userId } }) {
      edges {
        node {
          id
          userId
          pets {
            id
            animal {
              ...Animal_animal
            }
          }
        }
      }
    }
  }
`

这是Animal存在于组件中的PetList组件。该PetList组件是我希望重新渲染的组件，以包含一个新Animal组件以及使用突变创建的动物。


const Animal = ({ animal }) => {

  return (
    <li>
        <Summary animal={animal} />
    </li>
  )
}

export default createFragmentContainer(Animal, {
  animal: graphql`
    fragment Animal_animal on animals {
      name
      category
      imageUrl
      weight
      type
    }
  `
})

这是AddPetForm组件：

const AddPetForm = () => {
  const { hide } = useModal()
  return (
    <Modal>
      <QueryRenderer
        environment={environment}
        query={query}
        variables={{}}
        render={({ error, props }) => {
          //handle errors and loading 
          return (
            <Form
              hide={hide}
              //pass down props from query
            />
          )
        }}
      />
    </Modal>
  )
}

const query = graphql`
  query AddPetFormQuery {
    enum_animal_category_connection {
      edges {
        node {
          id
          value
        }
      }
    }
    //other enums to use in the form
  }
`

以及突变的代码（它存在于AddPetForm组件中）：

const Form = ({ hide, ...other props }) => {
  const { handleSubmit, register, errors, } = useForm({ defaultValues, resolver })
  const [mutationIsInFlight, setMutationIsInFlight] = useState(false)
  const [mutationHasError, setMutationHasError] = useState(false)

  const onCompleted = (response, error) => {
    setMutationIsInFlight(false)
    if (error) onError(error)
    else showSuccessNotification()
  }

  const onError = error => {
    setMutationIsInFlight(false)
    setMutationHasError(true)
  }

  const onSubmit = animal => {
    setMutationIsInFlight(true)
    setMutationHasError(false)
    //assume animal has already been added
    addAnimalAsPet({ animalId: animal.animalId, userId, onCompleted, onError })
    
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-wrap">
      // all of the inputs
      <div className="mt-3 w-full">
        <PrimaryButton type="submit" fullWidth={true} loading={mutationIsInFlight}>
          Save
        </PrimaryButton>
      </div>
      {mutationHasError && <p className="text-red-700 my-3">An error has occurred. Please try again.</p>}
    </form>
  )
}

和突变代码：

const mutation = graphql`
  mutation addAnimalAsPet Mutation($animalId: Int, $userId: Int) {
    insert_pets_one(object: { animalId: $animalId, userId: $userId }) {
      id
    }
  }
`

export const addAnimalAsPet = ({ userId, animalId, onCompleted, onError }) => {
  const variables = { userId, animalId }
  commitMutation(environment, {
    mutation,
    variables,
    onCompleted,
    onError
  })
}

有什么明显的我做错了吗？如您所见，有一个嵌套的 QueryRenderer HOC，这是否会以某种方式破坏自动更新？

我没有使用订阅，因为我不需要实时事件监听。这些数据只会在用户添加新宠物时更新，而且这种情况不会经常发生。而且我没有使用乐观的更新/响应，因为在等待响应之前确实不需要向用户显示更新成功。

从文档看来，有一种方法可以使用 Refetch Container 来做到这一点，但是必须重构我的代码才能使用片段。

4

1 回答 1

0

xadm的建议很有魅力。有一个retry函数是QueryRenderer render道具中对象的属性。

这是一个工作示例：

<QueryRenderer
  environment={environment}
  query={query}
  variables={{ userId }}
  render={({ error, props, retry }) => {
    //handle errors and loading
    const user = props.customers_connection.edges[0].node
    return (
      <div className="flex justify-between items-center">
        <h1 className="text-xl">Pets</h1>
        <AddPetForm refreshCustomerQuery={retry} />
        <PetList user={user} />
      </div>
    )
  }}
/>

refreshCustomerQuery然后，我只需在成功突变后调用该函数。

const onCompleted = (response, error) => {
  setMutationIsInFlight(false)
  if (error) onError(error)
  else {
    showSuccessNotification()
    refreshCustomerQuery()
  }
}
于 2020-09-21T16:37:12.107 回答