N
Nuxt•7mo ago
MrBobDaisy

Server directory API call will only work with 127.0.0.1

Making an API call to GraphQL only works with a hardcoded IP and port number. CMS is using ddev to run the docker container. If we set the URL to https://[sitedomain].ddev.site/api or http://localhost:[portnumber]/api we cannot connect to the API through the server directory. Making the call client side works without issue. Only error from Nuxt is fetch failed. Below is the server API call using Apollo Client, but useFetch gives the same errors. 
import { ApolloClient, InMemoryCache } from '@apollo/client';
// Find a way to dinamically import the query based on the page
import { homeQuery } from '../../queries/HomeQuery';

export default defineEventHandler(async (event) => {

  try {
    const client = new ApolloClient({
      // including hardcoded uri from .env to localhost since Nuxt won't pick up 
      // https://[sitedomain].ddev.site/api or http://localhost:[portnumber]/api
      uri: process.env.GQL_HOST,
      cache: new InMemoryCache()
    });


    const result = await client.query({
      query: homeQuery,
    });


    // Just returning title from now since that's the only field in the carbon boilerplate
    const title = result.data.entry.title;

    return {
      title: title
    }

  }  catch (error) {
    // Catch all errrors and return the corresponding error message
    console.error('Error fetching data:', error);

    return {
      error: 'Failed to fetch data',
    };
  }

})
import { ApolloClient, InMemoryCache } from '@apollo/client';
// Find a way to dinamically import the query based on the page
import { homeQuery } from '../../queries/HomeQuery';

export default defineEventHandler(async (event) => {

  try {
    const client = new ApolloClient({
      // including hardcoded uri from .env to localhost since Nuxt won't pick up 
      // https://[sitedomain].ddev.site/api or http://localhost:[portnumber]/api
      uri: process.env.GQL_HOST,
      cache: new InMemoryCache()
    });


    const result = await client.query({
      query: homeQuery,
    });


    // Just returning title from now since that's the only field in the carbon boilerplate
    const title = result.data.entry.title;

    return {
      title: title
    }

  }  catch (error) {
    // Catch all errrors and return the corresponding error message
    console.error('Error fetching data:', error);

    return {
      error: 'Failed to fetch data',
    };
  }

})
1 Reply
MrBobDaisy
MrBobDaisyOP•7mo ago
Bumping this

Did you find this page helpful?