Ant-design-pro: 请问有和GraphQL一起使用的例子和最佳实践吗？ 比如使用Apollo Client

[7-cat]

[ant-design-bot]

Translation of this issue:

---

Is there an example and best practice to use with GraphQL? For example using Apollo Client

[chenshuai2144]

没有，不常见！
可以找一下社区的公延一下

[afc163]

Apollo Client 最近还是比较火爆的，楼主可以帮忙贡献一个

[chenshuai2144]

需要一个新仓库了。和 redux 不是很兼容。

[kennylbj]

+1 graphQL近期越来越火了
有没打算做一个 ant-design-pro-graphql fork base on graphql

[linonetwo]

Antd Pro 封装得太死了，没有地方放 Provider。

如果能暴露出一个顶级的组件就好了，现在都没法手动把所有组件用 Provider 包装起来。

[agustif]

Antd Pro 封装得太死了，没有地方放 Provider。

如果能暴露出一个顶级的组件就好了，现在都没法手动把所有组件用 Provider 包装起来。

對於最新版本的v4，對TypeScript的完整更新以及使用antd / @layout和umi的塊和附加組件的所有內容的模塊化，絕對不是這樣。

你應該看看https://www.npmjs.com/package/umi-plugin-apollo

使用谷歌翻譯，原諒任何拼寫錯誤或語義。

[linonetwo]

感觉这个也不够灵活，我的 apollo setup 是这样的：

import { ApolloLink, split } from 'apollo-link';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { createUploadLink } from 'apollo-upload-client';

import config from '../../config/serviceConfig';

const isFile = (value: any) =>
  (typeof File !== 'undefined' && value instanceof File) || (typeof Blob !== 'undefined' && value instanceof Blob);
const isUpload = ({ variables }: { variables: object }) => Object.values(variables).some(isFile);

const requestLink = ApolloLink.from([
  onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.map(({ message, locations, path }) =>
        console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
      );
    }
    if (networkError) console.log(`[Network error]: ${networkError}`);
  }),
  new HttpLink({
    uri: config.graphqlEndpoint,
    credentials: 'same-origin',
  }),
]);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: split(isUpload, createUploadLink({ uri: config.graphqlEndpoint }), requestLink),
});

export default client;

比较个性化。

要是能提供一个钩子函数传入自己的 client 就好了。

[gaoxianglyx]

感觉这个也不够灵活，我的 apollo setup 是这样的：

import { ApolloLink, split } from 'apollo-link';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { createUploadLink } from 'apollo-upload-client';

import config from '../../config/serviceConfig';

const isFile = (value: any) =>
  (typeof File !== 'undefined' && value instanceof File) || (typeof Blob !== 'undefined' && value instanceof Blob);
const isUpload = ({ variables }: { variables: object }) => Object.values(variables).some(isFile);

const requestLink = ApolloLink.from([
  onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.map(({ message, locations, path }) =>
        console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
      );
    }
    if (networkError) console.log(`[Network error]: ${networkError}`);
  }),
  new HttpLink({
    uri: config.graphqlEndpoint,
    credentials: 'same-origin',
  }),
]);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: split(isUpload, createUploadLink({ uri: config.graphqlEndpoint }), requestLink),
});

export default client;

比较个性化。

要是能提供一个钩子函数传入自己的 client 就好了。

但是这个client怎么使用呢？没有地方封provider呀