<p>Yes you can. I use Craft 3 as an headless CMS for React or for any other javascript framework. </p>

<p>You have various options to do this, the most know ones are described here: <a href="https://docs.craftcms.com/v3/dev/headless.html#app" rel="nofollow noreferrer">https://docs.craftcms.com/v3/dev/headless.html#app</a></p>

<p>I would recommend you to use the CraftQL plugin. My example below is using ReactJS, Axios and CraftQL within CraftCMS. This plugin (CraftQL)  allows you to access your Sections, Entries, Categories, etc... by doing queries to a GraphQL api endpoint in Craft CMS.</p>

<p>See more about the plugin here:
<a href="https://github.com/markhuot/craftql" rel="nofollow noreferrer">https://github.com/markhuot/craftql</a></p>

<p>This is an example for ReactJS and with Axios on componentDidMount:</p>

<pre class="lang-js prettyprint-override"><code>  componentDidMount() {
    // data query
    // your GraphQL query should go here!!
    const queryData = {
      query: `{
        helloWorld
      }`
    };

    // GraphQL API headers
    // The values for craftql_token_type and craftql_token_value are in
    // the settings of the plugin in Craft CP (Control Panel). 
    // You can update the access to the GraphQL api endpoint there
    const queryHeaders = {
      headers: {
        'Authorization': `craftql_token_type craftql_token_value`
      }
    };

    // Axios POST request to GraphQL API url
    axios
      .post(api_url, queryData, queryHeaders)
      .then((response) =&gt; {
        if (response.data.data.errors) {
          // do something
        } else {
          // do something
          this.setState({
            data: response.data
          });
        }
      })
      .catch(error =&gt; {
        this.setState({
          error: true
        });
      });
  }
</code></pre>

<p>Hope this helps!</p>

<p>:)</p>

CC BY-SA 4.0
2019-06-21T16:56:03.883Z
2019-06-23T08:50:14.120Z
2019-06-23T08:50:14.120Z
bzin
<p>Hello I have a website built in Craft 3. I have some components built in React but typically the site is served using Twig templates. </p>

<p>How can I make an axios call to craft to request the page's entry blocks, sections, etc? Is this possible?</p>

<craft3>
How to request entries data for React?
# How to request entries data for React?

(Asked by: username_0 on 2019-06-21)

Hello I have a website built in Craft 3. I have some components built in React but typically the site is served using Twig templates.

How can I make an axios call to craft to request the page's entry blocks, sections, etc? Is this possible?

**Tags:** craft3

---

## 1 answers

### Answer by username_1 on 2019-06-21. Score: 1 | Accepted answer

Yes you can. I use Craft 3 as an headless CMS for React or for any other javascript framework. 
You have various options to do this, the most know ones are described here: https://docs.craftcms.com/v3/dev/headless.html#app
I would recommend you to use the CraftQL plugin. My example below is using ReactJS, Axios and CraftQL within CraftCMS. This plugin (CraftQL)  allows you to access your Sections, Entries, Categories, etc... by doing queries to a GraphQL api endpoint in Craft CMS.
See more about the plugin here:
https://github.com/markhuot/craftql
This is an example for ReactJS and with Axios on componentDidMount:
  componentDidMount() {
    // data query
    // your GraphQL query should go here!!
    const queryData = {
      query: `{
        helloWorld
      }`
    };

    // GraphQL API headers
    // The values for craftql_token_type and craftql_token_value are in
    // the settings of the plugin in Craft CP (Control Panel). 
    // You can update the access to the GraphQL api endpoint there
    const queryHeaders = {
      headers: {
        'Authorization': `craftql_token_type craftql_token_value`
      }
    };

    // Axios POST request to GraphQL API url
    axios
      .post(api_url, queryData, queryHeaders)
      .then((response) => {
        if (response.data.data.errors) {
          // do something
        } else {
          // do something
          this.setState({
            data: response.data
          });
        }
      })
      .catch(error => {
        this.setState({
          error: true
        });
      });
  }

Hope this helps!
:)


---

