title: How to fix error:only absolute URLS are supported in react ssr graphql
body: <p>I'm setting the server side rendering with apollo for set up the graphql in server side but I dont now know how I ran into this problem when ever I tried to use the query in side the one component this error appear in cli:</p>
  
  <pre><code>(node:4440) UnhandledPromiseRejectionWarning: Error: Network error: Only absolute URLs are supported
  at new ApolloError (G:\Project\node_modules\apollo-client\bundle.umd.js:59:32)
      at QueryManager.&lt;anonymous&gt; (G:\Project\node_modules\apollo-client\bundle.umd.js:13:49)
  </code></pre>
  
  <p>Please if you now what happen let me know.</p>
  
  <p><strong>Server code</strong></p>
  
  <pre><code>import React  from 'react'
  import routes from '../../client/Routes'
  
  import {StaticRouter} from 'react-router-dom'
  import {Provider} from 'react-redux'
  import {renderRoutes} from 'react-router-config'
  import {AES} from 'crypto-js';
  import {Helmet} from "react-helmet";
  import serialize from 'serialize-javascript' ;
  
  import  ApolloClient from 'apollo-client';
  import { ApolloProvider, renderToStringWithData  } from 'react-apollo';
  import { InMemoryCache } from "apollo-cache-inmemory";
  import { ApolloLink } from 'apollo-link';
  import { errorLink , queryOrMutationLink , getCircularReplacer } from './links';
  
  import fetch from 'node-fetch';
  
  export default async(req,store,context)=&gt;{
      const links = [errorLink,queryOrMutationLink({
          fetch,
          uri: 'http:localhost:3000/api/graphql',
      })]
      const client = new ApolloClient({
          ssrMode: true,
          link:ApolloLink.from(links),
          cache: new InMemoryCache()
      });
      const component = (
          &lt;ApolloProvider client={client}&gt;
              &lt;Provider store={store}&gt;
                  &lt;StaticRouter location={req.path} context={context}&gt;
                      {renderRoutes(routes)}
                  &lt;/StaticRouter&gt;
              &lt;/Provider&gt;
          &lt;/ApolloProvider&gt;
      )
      return renderToStringWithData(component).then(content=&gt;{
          let serializedStore = serialize(store.getState())
          let hashedUsersList = AES.encrypt(serializedStore, 'secret key 123');
          const helmet        = Helmet.renderStatic();
          return `
              &lt;html&gt;
                  &lt;head&gt;
                      ${helmet.title.toString()}
                      ${helmet.meta.toString()}
                      ${helmet.link.toString()}
                      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"&gt;
                      &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
                      &lt;script&gt;window.INITIAL_STATE = ${JSON.stringify(hashedUsersList, getCircularReplacer())}&lt;/script&gt;
                  &lt;/head&gt;
                  &lt;body&gt;
                      &lt;div id="root"&gt;${content}&lt;/div&gt;
                      &lt;script src="/public-bundle.js"&gt;&lt;/script&gt;
                      &lt;script&gt;window.__APOLLO_STATE__=${JSON.stringify(client.extract(),getCircularReplacer())}&lt;/script&gt;
                  &lt;/body&gt;
              &lt;/html&gt;`
      })
  }
  </code></pre>
  
  <pre><code>
  import React from 'react';
  import {hydrate}from 'react-dom';
  
  //-----------Redux
  import {Provider} from 'react-redux';
  import {createStore, applyMiddleware,compose} from 'redux';
  import thunk from 'redux-thunk';
  import {AES,enc,} from 'crypto-js'
  import axios from 'axios'
  //-----------Router
  import {BrowserRouter} from 'react-router-dom';
  import routes from './Routes';
  import {renderRoutes} from 'react-router-config'
  
  //-----------Internal_import
  import reducers from './store/reducers';
  
  //-----------GraphQL[APOLLO_CLIENT]
  import ApolloClient       from 'apollo-client';
  import { InMemoryCache }  from 'apollo-cache-inmemory';
  import { createHttpLink } from 'apollo-link-http';
  import { ApolloProvider } from 'react-apollo';
  import {fetch} from 'node-fetch';
  
  const client = new ApolloClient({
      connectToDevTools: true,
      link: createHttpLink({
          uri: 'http:localhost:3000/api/graphql',
          credentials:'same-origin'
      }),
      cache: new InMemoryCache({dataIdFromObject:o=&gt;o.id}).restore(window.__APOLLO_STATE__),
  })
  
  const axiosInstance = axios.create({baseURL: '/api'});
  const composeEnhancers = typeof window === 'object' &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
  const enhancer = composeEnhancers(applyMiddleware(thunk.withExtraArgument(axiosInstance)));
  
  let DecryptUsersList  = AES.decrypt(window.INITIAL_STATE, 'secret key 123');
  let UsersList_State = JSON.parse(DecryptUsersList.toString(enc.Utf8))
  
  const store = createStore(reducers,UsersList_State,enhancer)
  
  hydrate(
      &lt;ApolloProvider client={client}&gt;
          &lt;Provider store={store}&gt;
              &lt;BrowserRouter&gt;
                  {renderRoutes(routes)}
              &lt;/BrowserRouter&gt;
          &lt;/Provider&gt;
      &lt;/ApolloProvider&gt;
      ,document.querySelector('#root')
  )
  
  </code></pre>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import {connect} from 'react-redux';
  import {graphql} from 'react-apollo';
  import gql from 'graphql-tag';
  const Header = (props)=&gt;{
    console.log(props)
    const renderButtons=()=&gt;{
      if (props.user) {
        return (
          &lt;div&gt;
            &lt;li&gt;&lt;Link to="/admins"&gt;Admins&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/api/logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
        );
      } else {
        return (
          &lt;div&gt;
            &lt;li&gt;
              &lt;Link to="/users"&gt;Users&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to="/admins"&gt;Admins&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to="/Signin"&gt;SignIn&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to="/Signup"&gt;SignUp&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="/api/auth/google"&gt;Login via google&lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
        );
      }
    }
      return (
        &lt;nav&gt;
          &lt;div className="nav-wrapper"&gt;
            &lt;Link to="/" className="brand-logo left"&gt;
              Home
            &lt;/Link&gt;
            &lt;ul className="right"&gt;
              {renderButtons()}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
  }
  
  const query = gql`
  {
      user{
        id
        email
        name
      }
  }
  `
  const mapStateToProps =({auth})=&gt;({user:auth.user})
  export default connect(mapStateToProps,null)(graphql(query)(Header));
  </code></pre>