如何使用 ra-data-graphql-simple 添加自定义标题？

Question

我需要将我的 GraphQL 服务器连接到 react-admin，但它需要一个自定义标头进行身份验证，例如 (Authentication: Bearer + Token)

simpleRestProvider 函数接受 HTTP 客户端函数作为第二个参数，但我找不到使用 ra-data-graphql / graphcool / data-graphql-simple 添加它的方法。

app.js

import React, { Component } from 'react';

import { Admin, Resource } from 'react-admin';
import './App.css';
import { UserList } from './users';

import UserIcon from '@material-ui/icons/Group';
import Dashboard from './Dashboard';
import authProvider from './authProvider-old';
import graphql from './graphql';

class App extends Component {
  constructor() {
    super();
    this.state = { dataProvider: null };
  }
  async componentDidMount() {
    const dataProvider = await graphql();

    this.setState({ dataProvider })
  }

  render() {
    const { dataProvider } = this.state;

    if (!dataProvider) {
      return <div>Loading</div>;
    }

    return (
      <Admin dashboard={Dashboard} authProvider={authProvider} dataProvider={dataProvider}>
        <Resource name="users" list={UserList} icon={UserIcon} />
      </Admin>
    )
  }
};

export default App;

graphql.js

import buildApolloClient, {
  buildQuery as buildQueryFactory,
} from 'ra-data-graphql-simple';
import { GET_LIST } from 'ra-core';
import gql from 'graphql-tag';
const getGqlResource = resource => {
  switch (resource) {
    case 'users':
      return 'Users';

    default:
      throw new Error(`Unknown resource ${resource}`);
  }
};

const customBuildQuery = introspectionResults => {
  const buildQuery = buildQueryFactory(introspectionResults);

  return (type, resource, params) => {
    // if (type === DELETE) {
    //   return {
    //     query: gql`mutation remove${resource}($id: ID!) {
    //                 remove${resource}(cursor: 0)
    //             }`,
    //     variables: { id: params.id },
    //     parseResponse: ({ data }) => {
    //       if (data[`remove${resource}`]) {
    //         return { data: { id: params.id } };
    //       }

    //       throw new Error(`Could not delete ${resource}`);
    //     },
    //   };
    // }

    if (type === GET_LIST) {
      return {
        query: gql`query Get${resource}($cursor: Int!) {
                    get${resource}(cursor: $cursor) {
                      _id
                      name
                      lastName
                      email
                      crm
                    }
                }`,
        variables: { cursor: 0 },
        parseResponse: ({ data }) => {
          if (data[`get${resource}`]) {
            const getResource = data[`get${resource}`].map(({ _id, ...rest }) => ({ id: _id, ...rest }));

            return { data: getResource, total: getResource.length };
          }

          throw new Error(`Could not delete ${resource}`);
        },
      };
    }

    const bq = buildQuery(type, resource, params);

    console.log('BQ', bq);

    return bq
  };
};

export default () => {
  return buildApolloClient({
    clientOptions: {
      uri: 'http://localhost:4000/graphql',
    },
    buildQuery: customBuildQuery,
  }).then(dataProvider => async (type, resource, params) => {
    const dataArray = await dataProvider(type, getGqlResource(resource), params);

    return { data: dataArray.data.sort((a, b) => a.name - b.name), total: dataArray.total }
  }
  );
}

Answer 1

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
    uri: 'your project uri',
});

const authLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('token');
    // return the headers to the context so httpLink can read them
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : "",
        }
    }
});

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});

class App extends Component {
    constructor() {
        super();
        this.state = {
            dataProvider: null
        };
    }
    componentDidMount() {
        buildGraphQLProvider({
            client: client
        }).then(dataProvider => {
            dataProvider = addUploadFeature(dataProvider);
            this.setState({
                dataProvider
            });
        });
    }

你可以在documentation找到它