如何使用 ra-data-graphql-simple 添加自定义标头?

Question

>我需要将我的 GraphQL 服务器连接到 react-admin，但它需要一个自定义标头进行身份验证，例如(身份验证：持有者 + 令牌(

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

应用.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;

图QL.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
});
});
}

您可以在文档中找到它