Build fails with 404 Not Found at Netlify function path with Apollo Client

Support
, ,
1

Hi

I am implementing an Apollo graphql server using a Netlify lambda. The graphql client is configured to use process.env.DEPLOY_URL or http://localhost:8888, in this way:

const host = process.env.hasOwnProperty('DEPLOY_URL') ? process.env.DEPLOY_URL : 'http://localhost:8888';
const link = createHttpLink({
  fetch, // Switches between unfetch & node-fetch for client & server.
  uri: `${host}/.netlify/functions/gql_server`
});

Local server in http://localhost:8888/.netlify/functions/gql_server works without issues with netlify dev: the frontend code can query the server and get data, the same as the Graphql Playground.

However, the build process in deployment fails with a json error,

{ ServerParseError: Unexpected token N in JSON at position 0
        at JSON.parse (<anonymous>)
        at /opt/build/repo/node_modules/apollo-link-http-common/lib/index.js:35:25
        at process._tickCallback (internal/process/next_tick.js:68:7)
      name: 'ServerParseError',
      response:
       Response {
         size: 0,
         timeout: 0,
         [Symbol(Body internals)]: [Object],
         [Symbol(Response internals)]: [Object] },
      statusCode: 404,
      bodyText: 'Not Found' }

I have tried using DEPLOY_PRIME_URL and URL with the same results. I tried the settings recommended in the official Apollo documentation, a relative path, but my app uses Server Side Rendering and in this case the build fails with the error Error: only absolute urls are supported.

I understand the error, the URI is wrong and the resulting response Not Found is not a valid Json. However, after all these tests I still don’t know what is the right URI for the deployment of the lambda functions. Can anybody give me a hint about the right value I should use?

Edit: my netlify.toml is

[build]
  functions = "src/functions"

Thank you,

ZSC

2

seems like whatever you’re trying to fetch is not found. Perhaps you could output the URL you’re using before you try to contact it so you can confirm that things happen?

$host isn’t going to be set on netlify, so that’s a likely problem, which will hopefully be illuminated when you output some more debugging lines :slight_smile:

3

I had all sort of problems here, and that’s why I could not make it work. The most important part is that what is defined at build time is not what’s defined on netlify dev and it’s not what’s available at runtime.

However, this particular code would have worked if the client had been configured to provide authentication headers: the web was protected with Basic Auth. My client needed to use:

const link = createHttpLink({
  fetch, // Switches between unfetch & node-fetch for client & server.
  uri: `${host}/.netlify/functions/gql_server`,
  headers: {
    authorization: 'Basic ' + Buffer.from(`${process.env.AUTH_USERNAME}:${process.env.AUTH_PASSWORD}`).toString('base64')
  }
});

I am still trying to find the right way to detect when the client is running on netlify, or in a local server with netlify dev or in a local server with npm run start, but at least this part of the configuration works.

Thank you!

4

Interesting. Glad you got that figured out.

As far as detecting if the client is running on a local server or not, you could check for the value of DEPLOY_URL or URL env vars at build time and if there is a value and have your build take that value into account.