Блог

В настоящее время, если я запускаю мутации graphql из своего приложения react, они не работают, потому что токен авторизации отсутствует в заголовке. У меня есть секрет администратора, который я хочу вставить в заголовок, но я не уверен, как это сделать.

 import { ApolloClient } from 'apollo-client';
import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { ApolloProvider } from '@apollo/react-hooks';
....
const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'https://api/graphql',
});

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  cache,
  link,
});
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <ApolloProvider client={client}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ApolloProvider>
  </ThemeProvider>,
  document.querySelector('#root'),
);
  

У меня также есть это в моем Apollo.config.js файл:

 module.exports = {
    client: {
      service: {
        url: 'https://api/graphql',
        headers: {
          'x-hasura-admin-secret': 'xxx',
        },
      },
      excludes: ['src/graphql/index.tsx'],
    },
  };
  

Как я могу включить токен в заголовок? Это было бы что-то вроде этого:

 'Authorization', `Bearer ${token}
  

Тот же API использовался и в другом проекте React Native, и они получили токен следующим образом:

 import auth from '@react-native-firebase/auth';
...
const token = await auth().currentUser?.getIdToken();
  

Но я не понимаю, как добиться этого в react.

Я также пробовал это так:

 import { createHttpLink, InMemoryCache, ApolloClient } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'https://graphql',
});

const authLink = setContext((_, { headers }) => {
  const token = 'XX';
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

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

Но я получаю сообщение об ошибке здесь:

 <ApolloProvider client={client}>
  

это:

 Type 'ApolloClient<NormalizedCacheObject>' is missing the following properties from type 'ApolloClient<any>': store, writeData, initQueryManager
  

В зависимости от того, где ваш токен хранится на клиенте, вы можете попробовать это

 
const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("id");
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});