Java Qui Nhon: tháng 12 2021

GatsbyJs - Add environment variables

https://dev.to/kapilgorve/gatsbyjs-add-environment-variables-1io5

Development Environment

Create a new file named as .env.development at the root of your project.
Add your variable to the newly created file. Example - TEST_KEY=123
Change your npm run develop command to set environment.

For Windows -

    "develop": "set GATSBY_ENV=development && gatsby develop"

For Linux -

    "develop": "GATSBY_ENV=development gatsby develop"

Restart your dev environment. So Gatsby will load your new env file.
You should be able to access your env variables using process.env.TEST_KEY in any js file.

Production Environment

Create a new file named as .env.production at the root of your project.
Add your variable to the newly created file. Example - TEST_KEY=123
Change your npm run build command to set environment.

For Windows -

    "develop": "set GATSBY_ENV=production && gatsby develop"

For Linux -

    "build": "GATSBY_ENV=production gatsby build",

This is only if you want to build on local.

If you are using any providers like Netlify use the Linux version. You will also need to add environment variables in the service provider.

For Netlify it is in Site Settings > Build&Deploy > Environment

This post was originally published at https://www.jskap.com/blog/gatsby-add-environment-variables/

How to stretch the background image to fill a div

https://stackoverflow.com/questions/11223585/how-to-stretch-the-background-image-to-fill-a-div

Add

background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Axios: chaining multiple API requests

https://stackoverflow.com/questions/44182951/axios-chaining-multiple-api-requests

        const tokenInput = JSON.stringify({
                ...
            });
        const Agent = new https.Agent({
            rejectUnauthorized: false
        })
        // call for access token
        const [tokenResponse] = await Promise.all([axios
            .post(process.env.TOKEN_URL, tokenInput, {
                httpsAgent: Agent,
                headers: {
                  // Overwrite Axios's automatically set Content-Type
                  'Content-Type': 'application/json'
                }
            })
        ]);
        // check token
        const accessToken = tokenResponse.data.result.accessToken;
        // check access token
        if (!tokenResponse.data.result.accessToken) {
            return;
        }

        /**
         * prepare data to post
         */
        const postData = JSON.stringify({
            ....
        });

        axios
        .post(process.env.FORM_URL, postData, {
            httpsAgent: Agent,
            headers: {
              // Overwrite Axios's automatically set Content-Type
              'Content-Type': 'application/json'
            }
        })
        .then(res => {
          console.log(res);
        })
        .catch(error => {
          console.error(error)
        })

First off, not sure you want to do this in your componentWillMount, it's better to have it in componentDidMount and have some default states that will update once done with these requests. Second, you want to limit the number of setStates you write because they might cause additional re-renders, here is a solution using async/await:

async componentDidMount() {

  // Make first two requests
  const [firstResponse, secondResponse] = await Promise.all([
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p1}`),
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p2}`)
  ]);

  // Make third request using responses from the first two
  const thirdResponse = await axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + firstResponse.data.results.place_id + '&destination=place_id:' + secondResponse.data.results.place_id + '&key=' + 'API-KEY-HIDDEN');

  // Update state once with all 3 responses
  this.setState({
    p1Location: firstResponse.data,
    p2Location: secondResponse.data,
    route: thirdResponse.data,
  });

}

WordPress GraphQL vs Gatsby GraphQL

https://www.gatsbyjs.com/blog/getting-started-with-gatsby-source-wordpress-choose-your-own-adventure/

The query names you see here aren’t the same as the query names you’ll be using in Gatsby, so by all means peruse it at your leisure. However, we won’t be using quite the same query names in the following steps. (This is because with Gatsby, in order to avoid query-clash between different platforms, any WordPress-specific query usually contains the letters “Wp” to identify it as WordPress related. Plural queries are prefixed with “all”. Don’t worry, I’ll show you the diff).

Here’s a side by side equivalent GraphQL query to show an example of one of the main differences:

WordPress GraphQL

Gatsby GraphQL

{
  pages {
    nodes {
      title
    }
  }
}

{
  allWpPage {
    nodes {
      title
    }
  }
}

Back on the GraphQL page, below the GraphQL Endpoint item and input field at the very top, you’ll see a url for the new GraphQL endpoint. Make a note of this, since we will be using it in the next step ➡️.

wpgraphql: Node & Global ID

https://www.wpgraphql.com/docs/wpgraphql-concepts/

Every object in WordPress is treated as an individual "node" in GraphQL. Posts are nodes. Pages are nodes. Categories, tags, users, comments, menu items, etc are all considered "nodes".

And each "node" in the Graph can be identified by a unique ID.

In WordPress, IDs are not truly unique. There can be a Post with ID 1, a User with ID 1, a Category with ID 1 and a Comment with ID 1. WPGraphQL generates opaque global IDs for entities by hashing the underlying loader type and the database id. So, objects loaded by the Post loader get a global ID of base_64_encode( 'post:' . $database_id );. So, a Post with the database ID of 1 would have a global ID of cG9zdDox.

jquery-tabs

https://gist.github.com/chrisguitarguy/1237619

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('ul.tab-nav li').click(function(e){
		var tab_id = jQuery(this).attr('id');
		jQuery('ul.tab-nav li').removeClass('active');
		$(this).addClass('active');
		jQuery('.tab-container div.tab').hide();
		jQuery('.tab-container div#' + tab_id + '-tab').show();
	});
	jQuery('ul.tab-nav li:first-child').trigger('click');
});
</script>


<div class="tab-container">
	<ul class="tab-nav">
		<li id="one">One Tab</li>
		<li id="two">Two Tabs</li>
		<li id="three">Three Tabs</li>
	</ul>
	<div class="tab" id="one-tab">
		test
	</div>
	<div class="tab" id="two-tab">
	        test 1
	</div>
	<div class="tab" id="three-tab">
	        test 2
	</div>
</div>

Java Qui Nhon