By somereason, I need to get another page acf fields. my following frontity API using is correct?

🙋Get Help
1 
import React, { useEffect } from "react";
import { connect } from "frontity";

const PageDefault = ({ state, actions, libraries }) => {
    const data= state.source.get(state.router.link);
    const page = state.source[data.type][data.id];

    useEffect(() => {
        async function getPageACF(){
            const res = await libraries.source.api.get({
                endpoint: '/acf/v3/pages/361'
            });
            const resData = await res.json();
            console.log(resData);
        }

        getPageACF();
    }, []);

    return (
        <>
            <h1>{page.title.rendered}</h1>
            <h3>Default Page Template</h3>
            <div dangerouslySetInnerHTML={{__html : page.content.rendered}} />
        </>
    )
}

const connectedPageDefault = connect(PageDefault);
export { connectedPageDefault as PageDefault};

Second Case

import React, { useEffect, useState } from "react";
import { connect } from "frontity";

const PageDefault = ({ state, actions, libraries }) => {
    const [a, setA] = useState('aaaaaaaa');

    libraries.source.api.get({
        endpoint: '/acf/v3/pages/361'
    }).then(function(res){
        return res.json();
    }).then(function(acf){
        console.log(acf.acf.pageFirmSizeComponents[0].acf_fc_layout);
        setA(acf.acf.pageFirmSizeComponents[0].acf_fc_layout);
    });

    return (
        <>
            { a }
        </>
    );
}

const connectedPageDefault = connect(PageDefault);
export { connectedPageDefault as PageDefault};

please can anyone check my the above code? I need to get the ACF values of another page.
so I made my 2 method codes.
my above code is correct and professional? if not, please teach me quickly.

because when I used guide code, I got errors like the following.

const data = await api.get({
    endpoint: "/acf/v3/pages/361",
});

Screenshot_2020-08-24 Screenshot
Screenshot_2020-08-24 Screenshot1240×454 13.6 KB

2

Your error says

Can not use keyword "await" outside an async function

So, probably you forgot to define that function as async

3

@juanma Thanks for your reply. my following code is correct? if any more good solution, can you please let me know?

import React, { useEffect } from "react";
import { connect } from "frontity";

const PageDefault = ({ state, actions, libraries }) => {
    const data= state.source.get(state.router.link);
    const page = state.source[data.type][data.id];

    useEffect(() => {
        async function getPageACF(){
            const res = await libraries.source.api.get({
                endpoint: '/acf/v3/pages/361'
            });
            const resData = await res.json();
            console.log(resData);
        }

        getPageACF();
    }, []);

    return (
        <>
            <h1>{page.title.rendered}</h1>
            <h3>Default Page Template</h3>
            <div dangerouslySetInnerHTML={{__html : page.content.rendered}} />
        </>
    )
}

const connectedPageDefault = connect(PageDefault);
export { connectedPageDefault as PageDefault};
4

@forevereffort are you using the ACF to REST API plugin? If you use that, you just need to do post.acf and you’ll get your fields.

5

Hi @forevereffort,

an improvement over your code could be using the to NPM package to properly handle the possible errors got when on the await sentences

import React, { useEffect } from "react";
import to from 'await-to-js';
import { connect } from "frontity";

const PageDefault = ({ state, actions, libraries }) => {
    const data= state.source.get(state.router.link);
    const page = state.source[data.type][data.id];

    useEffect(() => {
        async function getPageACF(){
            let err, res, resData;
            [ err, res ] = await to(libraries.source.api.get({
                endpoint: '/acf/v3/pages/361'
            }));
            if(!res) {
                console.error('No response returned from get. Please check the endpoint is correct');
                console.error(err)
            }

            [ err, resData ] = await to(res.json())
            if(!resData) {
                console.error('Error getting JSON from res. Please check the endpoint is returning a proper JSON');
                console.error(err)
            }            
            // at this point everything should be OK
            console.log(resData);
        }

        getPageACF();
    }, []);

    return (
        <>
            <h1>{page.title.rendered}</h1>
            <h3>Default Page Template</h3>
            <div dangerouslySetInnerHTML={{__html : page.content.rendered}} />
        </>
    )
}

const connectedPageDefault = connect(PageDefault);
export { connectedPageDefault as PageDefault};

In this way, you’ll be able to detect more easily where the problem is
It may be, as @david1 says, that the use of ACF to REST API plugin is making the ACF data to be available somewhere else

Hope this helps

1 Like
7

@juanma Thank you very much