如何在antd pro v5中设置ApolloProvider在上下文中找不到“客户端”或作为选项传递

Question

我正在将antd pro v5与graphql一起使用。

我已经定义了布局ApolloLayout

export class ApolloLayout extends React.Component<IProps, {}> {
  constructor(props: IProps) {
    super(props);
  }

  render() {
    return (
      <>
        <ApolloProvider client={client}>{this.props.children}</ApolloProvider>
      </>
    );
  }
}

并将ApolloLayout包裹在pages/contacts/index.tsx

中

...
  return (
    <>
      <ApolloLayout>
        <PageContainer>
          ...
          <CreateGroupForm name={value} unsetForm={() => setGroupEditable(false)} />
          ...
        </PageContainer>
      </ApolloLayout>
    </>
  );

我的pages/contacts/CreateGroupForm.tsx是

const AddGroupForm: React.FC<AddGroupProps & FormikProps<AddGroupValues> & any> = ({
...
...
...
})
export default compose(
  withApollo,
  withFormik<AddGroupProps, AddGroupValues>({
    enableReinitialize: true,
    mapPropsToValues: ({ id, name, create, unsetForm }) => {
      return {
        name,
      };
    },
    validationSchema: Yup.object().shape({
      name: Yup.string().required('Group name is required'),
    }),
    handleSubmit: (values, formikBag) => {
      console.log(values);
    },
  }),
  withCreateContactGroup()
)(AddGroupForm);

withCreateContactGroup是由graphql-codegen临时生成的

但我遇到错误 Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.