4

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;
1
  • intenta agragar mayuscula authorization: token ? Bearer ${token} : "", a Authorization: token ? Bearer ${token} : "",
    – Enzo
    Commented el 8 mar. 2021 a las 21:50

1 respuesta 1

1

despues de ver el codigo con un colega pudimos llegar a la solucion hacian falta estas lineas en el metodo current_user:

# Aqui se agregan las tres lineas
session['init'] = true
session[:token] = request.headers['authorization'] if request.headers['authorization']
return unless session[:token]

crypt = ActiveSupport::MessageEncryptor.new(Rails.application.secrets.secret_key_base.byteslice(0..31))
token = crypt.decrypt_and_verify session[:token]
user_id = token.gsub('user-id:', '').to_i
User.find user_id
2
  • 1
    ¡Genial! Gracias por compartir la solución con la comunidad :)
    – Alvaro Montoro
    Commented el 9 mar. 2021 a las 1:44
  • De nada estimado!
    – Richi
    Commented el 9 mar. 2021 a las 1:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.