NoMethodError when trying to fetch to Rails API endpoint from React frontend

Question

This is really leaving me scratching my head. What I'm trying to do should be pretty straight forward but for some reason I just can't get it working.

As the title says I'm trying to fetch some information from a Rails API endpoint I set up to display in a React component.

My fetch looks like this:

  componentDidMount() {
    fetch(`/api/v1/coffee_formulas`)
    .then(response => response.json())
    .then(body => {
      this.setState({ formulas: body })
    })
  }

And the API endpoint looks like:

  def index
    formulas = current_user.coffee_formulas
    render json: { status: 'SUCCESS', message: 'Loaded coffee formulas', coffee_formulas: formulas }, status: :ok
  end

The thing that is confusing me is the fact that I can navigate to http://localhost:3000/api/v1/coffee_formulas and see the exact JSON that I want to get on the React end. My assumption was that I could make a fetch to the same point but I guess I'm missing something.

A couple things to note

I am able to successfully post to the same API.
I'm using Google OmniAuth to generate a session and current_user.
I've tried setting the state of formulas a few different way with the same results. (ex: formulas: body.formulas, formulas: body.coffee_formulas, etc.)
The exact error I'm seeing in my terminal is:

NoMethodError (undefined method 'coffee_formulas' for nil:NilClass):

The error in my console is a 500 (Internal Server Error)

Like I said I figured this was a pretty straightforward thing but I guess I'm missing a pretty crucial detail here. Any suggestions would be very much appreciated!

awesome_treehouse · Accepted Answer · 2017-11-08 00:28:53Z

1

So it ended up being a problem with the fetch its self. The controller was in fact doing what I wanted it to but the fetch needed to be formatted like:

  componentDidMount() {
  fetch(`/api/v1/coffee_formulas.json`, {
    credentials: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    method: 'GET'
  }).then(response => response.json())
    .then(body => {
      this.setState({
        formulas: body.coffee_formulas,
        user: body.current_user
      })
    })
  }

answered Nov 8, 2017 at 0:28

awesome_treehouse

871 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gregy · Accepted Answer · 2017-11-05 17:48:49Z

0

NoMethodError (undefined method 'coffee_formulas' for nil:NilClass) means that you are trying to invoke coffe_formulas method on nil class. Your current_user helper returns nil so you haven't authorized your request.

answered Nov 5, 2017 at 17:48

Gregy

3401 gold badge6 silver badges17 bronze badges

5 Comments

awesome_treehouse Over a year ago

I guess I'm just still unclear on what I'm not getting. If I just get all the coffee_formulas in my database by changing formulas = current_user.coffee_formulas to formulas = CoffeeFormula.all I don't get an error in my terminal but I still come up with nothing when I try to see what the state of formulas is. The other thing that's tripping me up is how current_user comes back as nil but when I go to http://localhost:3000/api/v1/coffee_formulas I see only the information that is relevant to the current_user. Switching accounts updates as it should too.

sameera207 Over a year ago

add a break point, E.g pry right after the index method signature and see what you are getting for the current_user, when called via react

Gregy Over a year ago

@awesome_treehouse you are probably using devise gem. Are you sure that you have added following line to your controller? before_action :authenticate_user! Without this callback current_user won't be resolved.

awesome_treehouse Over a year ago

@Gregy, so I'm actually not using devise. Just gem 'omniauth-google-oauth2'. In my ApplicationController I have a helper method the defines the current_user which I thought would give me access to the user who is signed in.

Gregy Over a year ago

@awesome_treehouse can you update the question with your's current_user method?

Collectives™ on Stack Overflow

NoMethodError when trying to fetch to Rails API endpoint from React frontend

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related