From 8a41cee816fc9ece501504ac9620a8b64ea7f1f1 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Tue, 8 Oct 2019 20:12:37 +0200
Subject: [PATCH] refactor: access methods directly

---
 packages/react/src/index.js       | 23 +++++++++++++----------
 packages/react/src/utils/index.js |  6 +++---
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 9e1eb47f7..f140d6fb2 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -68,16 +68,19 @@ function Microlink (props) {
     [isLazyEnabled, hasIntersected]
   )
 
-  const fetchData = useCallback(() => {
-    if (canFetchData) {
-      setLoading(true)
-      const fetch = isFunction(setData)
-        ? Promise.resolve({})
-        : fetchFromApi(props.url, apiUrl, apiUrlProps)
-
-      fetch.then(({ data }) => mergeData(data))
-    }
-  }, [apiUrl, canFetchData, setData, apiUrlProps])
+  const fetchData = useCallback(
+    () => {
+      if (canFetchData) {
+        setLoading(true)
+        const fetch = isFunction(setData)
+          ? Promise.resolve({})
+          : fetchFromApi(props.url, apiUrl, apiUrlProps)
+
+        fetch.then(({ data }) => mergeData(data))
+      }
+    },
+    [apiUrl, canFetchData, setData, apiUrlProps.headers['x-api-key']]
+  )
 
   const mergeData = useCallback(
     fetchData => {
diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
index 28bbdded0..b7b95d9ce 100644
--- a/packages/react/src/utils/index.js
+++ b/packages/react/src/utils/index.js
@@ -1,5 +1,5 @@
 import { css } from 'styled-components'
-import mql from '@microlink/mql'
+import { fetchFromApi, getApiUrl as createApiUrl } from '@microlink/mql'
 
 const REGEX_HTTPS = /^https/
 const REGEX_LOCALHOST = /http:\/\/localhost/
@@ -38,7 +38,7 @@ export const getApiUrl = ({
   media,
   ...opts
 }) =>
-  mql.getApiUrl(url, {
+  createApiUrl(url, {
     apiKey,
     video: media.includes('video'),
     screenshot: media.includes('screenshot'),
@@ -47,7 +47,7 @@ export const getApiUrl = ({
     ...opts
   })
 
-export const fetchFromApi = mql.fetchFromApi
+export { fetchFromApi }
 
 export const isLarge = cardSize => cardSize === 'large'