tengo el siguiente problema:
Actualmente tengo configurada una app con react que consume un servicio a traves de graphql con apollo, probe en graphiql que el servicio funcionara (el user debe estar autenticado) pero ahora que pase las queries al front y llamo al servicio me retorna user must be authenticated
.
Es como si al momento de hacer una peticion no me reconociera que el usuario esta autenticado, cuando revise en la condiguracion de index.js
la variable authLink
me pude percatar que el headers de setContext
llega undefined
:
// 1
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
// 2
const httpLink = createHttpLink({
uri: config.url.API_URL
});
// 3
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}` : "",
}
}
});
// 4
export const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
})
El servicio en la vista se configuro de la siguiente manera:
// React
import React from 'react';
// Components
import SearchBar from '../../../components/searchbar';
import Books from '../../../components/books';
// React apollo
import { graphql } from 'react-apollo';
import compose from 'lodash.flowright';
// Queries
import queries from './queries';
// Style
import './style.sass';
class BookHome extends React.Component {
constructor(props) {
super(props);
this.state = {
books: []
}
this.getBooks();
}
getBooks = () => {
const { getBooks } = this.props;
console.log(this.props);
}
render() {
return(
<div className="books-home-container">
<div className="books-header-home"></div>
<SearchBar />
<Books />
</div>
);
}
}
export default compose(
graphql(queries.getBooks, { name: 'getBooks' })
)(BookHome);
Y la variable queries que se llama de la vista (de arriba):
import gql from 'graphql-tag';
const queries = {
getBooks: gql`
query {
bookList {
id
coverImage
title
author
rating
}
}
`,
}
export default queries;
authorization: token ? Bearer ${token} : "",
aAuthorization: token ? Bearer ${token} : "",