Javascript 在子组件中提交表单后，如何刷新父组件中的graphql查询？

我在下面的尝试并没有导致提取INVOICE_查询或重新呈现表组件

父级查询组件的快照：

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }} >
     {({ data, loading }) => {
     if (loading) return <Loading />;

     return (
      <Wrapper>
        <Form/> 
        <Table invoices={data.invoices}/>
      </Wrapper>
   ):
 }}
</Query>

 <Mutation mutation={CREATE_INVOICE}
   refetchQueries={[
    {
      query: INVOICES_QUERY,
      variables: {
        orderBy: 'date_DESC',
       },
     },
   ]} 
   awaitRefetchQueries
    >
      {(createInvoice, { error, loading, data }) => (
        <Formik
          render={formikProps => (
            <InvoiceForm
              loading={loading}
              error={error}
              {...formikProps}
            />
          )}
          onSubmit={(values, actions) => this.handleSubmit(values, actions, createInvoice)}
          initialValues={this.initialValues}
        />
      )}
    </Mutation>  

孩子突变成分的快照：

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }} >
     {({ data, loading }) => {
     if (loading) return <Loading />;

     return (
      <Wrapper>
        <Form/> 
        <Table invoices={data.invoices}/>
      </Wrapper>
   ):
 }}
</Query>

 <Mutation mutation={CREATE_INVOICE}
   refetchQueries={[
    {
      query: INVOICES_QUERY,
      variables: {
        orderBy: 'date_DESC',
       },
     },
   ]} 
   awaitRefetchQueries
    >
      {(createInvoice, { error, loading, data }) => (
        <Formik
          render={formikProps => (
            <InvoiceForm
              loading={loading}
              error={error}
              {...formikProps}
            />
          )}
          onSubmit={(values, actions) => this.handleSubmit(values, actions, createInvoice)}
          initialValues={this.initialValues}
        />
      )}
    </Mutation>  

---

父组件显示用于提交发票的表单和显示已提交发票列表的表。在表单组件子1中提交新表单时，执行graphql变异，我希望发票查询graphql查询刷新，以便表组件子2显示更新后的发票列表。谢谢大家!

我相信查询组件render prop有一个refetch方法。然后，您可以传递此消息，并根据需要调用它

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }} >
  {({ data, loading, refetch }) => {
    ...
    <Form onSubmit={() => refetch()} />
    ...
  }}
</Query> 

---

我相信查询组件render prop有一个refetch方法。然后，您可以传递此消息，并根据需要调用它

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }} >
  {({ data, loading, refetch }) => {
    ...
    <Form onSubmit={() => refetch()} />
    ...
  }}
</Query> 

---

我的解决方案是将查询组件的refetch方法传递给表单组件，并在变异完成时调用refetch

在父组件中：

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }}>
    {({ data, loading, refetch }) => {
      if (loading) return <Loading />;

<Mutation mutation={CREATE_INVOICE}
      onCompleted={() => {
        this.props.invoiceSubmitted();
        this.props.refetch();
      }}
    >

在表单组件内部：

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }}>
    {({ data, loading, refetch }) => {
      if (loading) return <Loading />;

<Mutation mutation={CREATE_INVOICE}
      onCompleted={() => {
        this.props.invoiceSubmitted();
        this.props.refetch();
      }}
    >

---

我的解决方案是将查询组件的refetch方法传递给表单组件，并在变异完成时调用refetch

在父组件中：

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }}>
    {({ data, loading, refetch }) => {
      if (loading) return <Loading />;

<Mutation mutation={CREATE_INVOICE}
      onCompleted={() => {
        this.props.invoiceSubmitted();
        this.props.refetch();
      }}
    >

在表单组件内部：

<Query query={INVOICES_QUERY} variables={{ orderBy: 'date_DESC' }}>
    {({ data, loading, refetch }) => {
      if (loading) return <Loading />;

<Mutation mutation={CREATE_INVOICE}
      onCompleted={() => {
        this.props.invoiceSubmitted();
        this.props.refetch();
      }}
    >

REFETCHQUERES应导致发票\u查询被重新蚀刻，这将导致使用新数据重新提交表组件。我猜你没有看到组件更新了吧？您能在浏览器的开发工具中看到正在重新绘制的查询吗？重新绘制查询将导致重新绘制发票查询，这将导致使用新数据重新绘制表组件。我猜你没有看到组件更新了吧？您能在浏览器的开发工具中看到正在重新绘制的查询吗？