Updating Data in Firebase using React and Axios

Question

I'm trying to update some data in a firebase database. However i am unable to get the updateAPI function to work properly. I believe it's something to do with axios.put, the url is probably not traversing the data correctly?

I have tried changing the url but end up with a OPTIONS and CORS errors which means the url is incorrect.

        // API Function calls
        async getAPI(){
                const response = await axios.get('https://fir-test-euifhefibewif.firebaseio.com/todos.json')
                console.log(response)
                console.log(response.data)
            }
            async postAPI(){
                const response = await axios.post('https://fir-test-euifhefibewif.firebaseio.com/todos.json', {name: notesAll})
                console.log(response)
                console.log(response.data)
            }
            async deleteAPI(){
                const response = await axios.delete('https://fir-test-euifhefibewif.firebaseio.com/todos.json')
                console.log(response)
                console.log(response.data)
            }
            async updateAPI(){
                const response = await axios.put('https://fir-test-euifhefibewif.firebaseio.com/todos/-LVYEw6KTltVoEkPeuxY/name/0', {note})
                console.log(response)
                console.log(response.data)
            }

        // Notes notesAll
        const notesAll = [
        {
                "name": "user1",
                "race": "human"
            },
            {
                "name": "user2",
                "race": "human"
            },
            {
                "name": "user3",
                "race": "human"
            },
            {
                "name": "user4",
                "race": "human"
            },
            {
                "name": "user5",
                "race": "human"
            }
        ]

        // Test data
            const note = [
            {
                name: 'Test',
                race: 'Test'
            }
        ]

        // Firebase database example
        {
        "todos": {
            "-LVYIfktKR6fa6ish1aw": {
            "name": [
                {
                "name": "user1",
                "race": "human"
                },
                {
                "name": "user2",
                "race": "human"
                },
                {
                "name": "user3",
                "race": "human"
                },
                {
                "name": "user4",
                "race": "human"
                },
                {
                "name": "user5",
                "race": "human"
                }
            ]
            }
        }
        }

All the code needs to do is update some data inside of an array of objects.

@Colin OPTIONS 405 (Method Not Allowed) Access to XMLHttpRequest at 'fir-test-euifhefibewif.firebaseio.com/todos/name/0/name' from origin 'localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Uncaught (in promise) Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError — Andrew Baisden
– Andrew Baisden, Commented Jan 6, 2019 at 14:05

Joelgullander · Accepted Answer · 2019-01-06 14:18:50Z

3

Try:

    async updateAPI(){
        const response = await axios.put('https://fir-test-euifhefibewif.firebaseio.com/todos/-LVYEw6KTltVoEkPeuxY/name/0', note)
        console.log(response)
        console.log(response.data)
    }

    // Test data
    const note = {
        name: 'Test',
        race: 'Test'
    }

To write to Firebase Database using REST, the URL must end in .json. So:

url = yourUrl + ".json";

Find more information here: https://firebase.google.com/docs/database/rest/save-data

edited Jan 6, 2019 at 14:18

answered Jan 6, 2019 at 14:00

Joelgullander

1,6943 gold badges23 silver badges51 bronze badges

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

1 Comment

Andrew Baisden Over a year ago

Thanks, I tried the code, however it still did not work.

Collectives™ on Stack Overflow

Updating Data in Firebase using React and Axios

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related