Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-06-21T16:56:03.883Z
Answers.LastActivityDate: 2019-06-23T08:50:14.120Z
Answers.LastEditDate: 2019-06-23T08:50:14.120Z
Answers.UserDisplayName: bzin
Body: <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>
  
Tags: <craft3>
Title: How to request entries data for React?
ThreadText: # 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:
  
  ```js
    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!
  
  :)
  
  
  ---
  
  