isFetching is always true for custom post types

🙋Get Help
1

I have a CPT called Icons

I tested the API with this link and it is working very well
link https://wp.local/wp-json/wp/v2/icons?slug=icon_slug
output

[
    {
        "id": 461,
        "date": "2020-01-14T11:16:59",
        "date_gmt": "2020-01-14T11:16:59",
        "guid": {
            "rendered": "http://wp-local/?post_type=icons&p=461"
        },
        "modified": "2020-01-14T13:00:08",
        "modified_gmt": "2020-01-14T13:00:08",
        "slug": "icon_slug",
        "status": "publish",
        "type": "icons",
        "link": "https://wp-local/icons/icon_slug/",
        "title": {
            "rendered": "icon_slug"
        },
        "template": "",
        "acf": {
            "main_page_color": "",
            "icon_code": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"34\" viewBox=\"0 0 34 34\">\r\n                              <path fill=\"var(--color)\"\r\n                                    d=\"M5.047 20.055a2.988 2.988 0 1 1 0 5.976 2.988 2.988 0 0 1 0-5.976zM17 0a2.988 2.988 0 1 1 0 5.977A2.988 2.988 0 0 1 17 0zm11.953 20.055a2.988 2.988 0 1 1 0 5.976 2.988 2.988 0 0 1 0-5.976zm0 5.976c2.746 0 5.047 2.234 5.047 4.98V34H23.973v-2.988c0-.664.136-1.296.372-1.875l-4.241-2.828c-.775.676-1.622 1.35-2.451 2.068l-.653.566s-2.348-1.995-3.088-2.645l-4.257 2.839c.236.58.372 1.21.372 1.875V34H0v-2.988c0-2.747 2.3-4.98 5.047-4.98 1.365 0 2.603.553 3.504 1.446l3.904-2.603c-.85-.96-1.394-1.945-1.394-3.134 0-2.063 1.524-3.679 3.468-3.679.577 0 1.064.137 1.475.35v-4.334H12.02v-3.121A4.986 4.986 0 0 1 17 5.977a4.986 4.986 0 0 1 4.98 4.98v3.12h-3.984v4.334c.41-.212.898-.349 1.475-.349 1.944 0 3.468 1.616 3.468 3.68 0 1.188-.56 2.193-1.385 3.14l3.895 2.596a4.963 4.963 0 0 1 3.504-1.447z\"/>\r\n                        </svg>"
        },
        "_links": {
            "self": [
                {
                    "href": "https://wp-local/wp-json/wp/v2/icons/461"
                }
            ],
            "collection": [
                {
                    "href": "https://wp-local/wp-json/wp/v2/icons"
                }
            ],
            "about": [
                {
                    "href": "https://wp-local/wp-json/wp/v2/types/icons"
                }
            ],
            "wp:attachment": [
                {
                    "href": "https://wp-local/wp-json/wp/v2/media?parent=461"
                }
            ],
            "curies": [
                {
                    "name": "wp",
                    "href": "https://api.w.org/{rel}",
                    "templated": true
                }
            ]
        }
    }
]

in index.js I added this code

state: {
  source: {
    postTypes: [
      {
        type: 'icons',
        endpoint: 'icons',
      },
    ],
  },
},

after that I tried to use this CPT as following

actions.source.fetch(`/icons/icon_slug/`);
const icon = state.source.get(`/icons/icon_slug/`);
console.log(icon);
if (icon.isReady) {
    console.log(state.source[icon.type][icon.id]);
}

But in the console I always get this

{isReady: false, isFetching: true}

I really help here as I can’t see where is the problem

Thanks in advance :slight_smile:

2

Hi @modyydom! :wave:

I’ve just seen that you posted some further questions on the forum. Have you managed to solve this problem in the end?

3

thank you @mmczaplinski for your quick response
I really appreciate it :slight_smile:

the answer is unfortunately NO :frowning:

but I’m really stressed as my deadline is very close and I have many unsolved questions.

thanks again for your help.

4

If this code you posted is correct I think the problem of you not seeing the data change and always showing isFetching: true is because you are not waiting for the response (fetch is an async function):

await actions.source.fetch('/icons/icon_slug');

Let me know if that solves it.

5

I thought that because I use connect with the component so when the fetch promise resolve and the state.source get populated with the new data it will re-render the component again so I don’t need to wait for the fetch
am I right??

If I have to wait for the promise to resolve so how can I use await inside the component function as components have to return JSX and if I made it async it will return promise and causes an error.

Thank you very much @orballo

6

Yes, once called fetch you don’t need to wait for it, but that console.log in your code above will definitely print the wrong value because fetch hasn’t been resolved yet, that’s why I said that for that console.log to print the right value you need to wait for fetch.

And in order to use fetch inside a component you need to do it with the hook useEffect.

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

const MyComponent = ({ actions }) => {
  useEffect(() => {
    actions.source.fetch('/icons/icon_slug');
  }, []);

  return <div></div>
};

export default connect(MyComponent);

Info on useEffect: https://reactjs.org/docs/hooks-reference.html#useeffect

And yes, this way once the fetch is resolved, you should see your UI updated.

By the way, did you get any error on the terminal or console while trying to fetch this?
Have you chacked if frontity.state.source[icon.type][icon.id] is populated?

2 Likes
7

Again you made my day :smiley:

to sum up:

  1. Don’t log the state.source.get() as it will NOT update in the console.
  2. Use fetch In useEffect().
  3. Ask Frontity team as they are awesome :heart: :rocket: :ok_hand:

Thank you my friend.

2 Likes