Fetching from multiple WP API to one Site

🙋Get Help
1

Hi,

I’m trying to pull pages/posts from two different WP API. I tried adding a second source in the frontity.settings.js file, but that didn’t seem to affect anything. I also tried just using the native js fetch request on the second site, and that gives me a reference error where fetch is not defined. All of the multisite posts are about serving frontity to two different existing domains, feels like I’m trying to do the opposite. Essentially, I want to have one component on my site that uses the data from a different set of posts (i.e. separate wp json data) than the rest of my content. Any help would be appreciated.

Update: Going back through the docs I made some further progress. Using the multisite information here I adjusted my frontity.settings.js. Just as a note, it seemed I had to make my match settings into an array

 {
    "name": "abc",
    match: ["(?!\/events-calendar)"],
    ...
    },
    "packages": [
      {
        "name": "abc-theme",
      },
      {
        "name": "@frontity/wp-source",
        "state": {
          "source": {
            "url": "https://source1.com",
          }
        }
      },
      "@frontity/tiny-router",
      "@frontity/html2react"
    ]
  },
  {
    "name": "abc-events",
    match: ["\/events-calendar"],
   ...
    },
    "packages": [
      {
        "name": "abc-theme",
      },
      {
        "name": "@frontity/wp-source",
        "state": {
          "source": {
            "url": "https://source2.com",
          }
        }
      },
      "@frontity/tiny-router",
      "@frontity/html2react"
    ]
  }

Then following some of the advice form this post by @luisherranz I tried adding a useEffect hook to the component I want to fetch from the second site, using the /events-calendar path

React.useEffect(() => {
    actions.source.fetch("/events-calendar")
  }, [ ])

const data = state.source.get("/events-calendar")

However, now when I try to log “data” in order to see how I can map the items, I am receiving a 404 error.
Maybe this was the wrong way to go, still open to any help possible.

Thanks,
Gideon

2

Hi @gideonjb, and welcome to the Frontity community.

Could you provide a link to a repo so members of the community can view your code and clone your project if necessary. Also if your two APIs are on publicly accessible sites that will help in reproducing your problem.

Please see here for the kind of information that you can provide that will best help the community to help you.

3

Hi @mburridge, thanks for the welcome.

Unfortunately, I can’t provide that information right now. That’s why I was trying to post my use case in general terms (I altered my code above for privacy as well). So, assuming both API are public, and you want both sets of data to be available from frontity state at the same url, is this possible, and how should I configure my settings?

4

For anyone interested, I did solve this issue, although it seems like something frontity should be able to do under the hood. If we can have frontity serve on API, why not two?

Either way, first you have to import { fetch } from “frontity”, which is actually difficult to find documentation on when you are searching for it, and the standard js fetch is not available by default. Then I resolved the fetched json object and saved it to frontity state like so:

const fetchFromAPI = async() => {
    const response = await fetch("https://yoururl.com/wp-json/...");
    const body = await response.json();
    return body;
  };

  const getPromise = () => {
    return Promise.resolve(fetchFromAPI())
  }

  useEffect(() => {
    getPromise().then((fetchedData) => {
      actions.theme.setEventsCalendar(fetchedData.events)
    })
  }, [])

So when the component mounts it fetches the data, and then I can use the data form state.

5

Hi @gideonjb ,

Glad you were able to solve your issue.

Can you please open a Feature Discussion with this improvement so the community can have a proper conversation about it?

Thanks for the feedback.
Which terms did you use to look for this in the docs?
Is there any specific sections you were expecting to find this information?

6

Hi @juanma,

I’ll open a feature discussion soon.

As for your second question, I think the main issue is that I was expecting a native js function to work without import in frontity. Because I couldn’t find the correct way to import a second API to the same url on the forum, I assumed the Reference Error I was receiving was the result of that issue. In hindsight, I should have paid better attention to what the error was telling me, but it just didn’t occur to me that it would need to be imported, because I’ve never needed to do that in other applications. And, I didn’t look for it in the frontity docs at first (although it is there), for the same reason.

So, perhaps there should be an area in the documentation for specific things that frontity handles differently than native js.

1 Like