【graphql】antd pro 中使用 graphql

1. 安装依赖

yarn add apollo-boost apollo-cache-inmemory apollo-link-http graphql graphql-tag react-apollo

2. 跨域

config/proxy.ts
export default {
  dev: {
    '/graphql': {
      target: `http:/127.0.0.1/3000/graphql`,
      changeOrigin: true,
    },
}

3.src目录下新建graphql目录，新建client.js文件

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'graphql',
});

4.在src目录下新建graphql目录，新建mutations.js文件

import gql from 'graphql-tag';

export const LOGIN_VerifyCode = gql`
  mutation ($input: UserRequestLoginVerifyCodeInput!) {
    userRequestLoginVerifyCode(input: $input)
  }
`;

5. 组件中调用接口的使用

import { useMutation } from "react-apollo";
import { client, LOGIN_VerifyCode } from "@/graphql";
import { ApolloProvider } from "react-apollo";

 const [requestLoginVerifyCode] = useMutation(LOGIN_VerifyCode);

  const handleVerifyCode = async (phone: string) => {
    const { data } = await requestLoginVerifyCode({
      variables: { input: { phone } }
    });
    return data;
  };

const App = connect()(Login);
export default () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

6. antdpro中使用
https://github.com/ant-design/ant-design-pro/issues/7988
https://github.com/ant-design/ant-design-pro/issues/1260

pro5的布局采用在app.tsx中导出一个layout的配置，而不是导出一个layout的组件，通过 childrenRender，全局配置

 childrenRender: (children, props) => {
      return (
        <>
		 <ApolloProvider client={client}>{children}</ApolloProvider>