Nuxt•15h ago

Apollo | graphql | proxy

Backend runs on Sprapi on pm2. Frontend is Nuxt on pm2. Installed Apollo Graphql server to get data from backend. I wanted to proxy localhost:3000/graphql to localhost:1337/graphql. How to correctly proxy, so user will not see backend. User must see that graphql request is going to localhost:3000/graphql, but in reality these request should proxy to localhost:1337/graphql

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  ssr: true,

  modules: ["@nuxtjs/apollo", "@nuxt/eslint", "@radya/nuxt-dompurify"],

  routeRules: {
    "/graphql": { 
      // prerender: true ,
      redirect: "https://10.1.20.208/graphql",
    },
  },
  
  apollo: {
    clients: {
      default: {
        httpEndpoint: "/graphql",
      },
    },
  },
});

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  ssr: true,

  modules: ["@nuxtjs/apollo", "@nuxt/eslint", "@radya/nuxt-dompurify"],

  routeRules: {
    "/graphql": { 
      // prerender: true ,
      redirect: "https://10.1.20.208/graphql",
    },
  },
  
  apollo: {
    clients: {
      default: {
        httpEndpoint: "/graphql",
      },
    },
  },
});

2 Replies

kapa.ai•15h ago

Hi @EnverMT. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To proxy GraphQL requests from your Nuxt frontend (running on pm2) to your Strapi backend (also on pm2), so that users only see requests to /graphql on your frontend (localhost:3000/graphql), you should use a server middleware or a Nitro server API endpoint in Nuxt 3. This way, requests to /graphql are transparently forwarded to your backend at localhost:1337/graphql, and the backend URL is never exposed to the client. Your current use of routeRules with redirect will not proxy the request—it will simply redirect the client, exposing the backend URL, which is not what you want. Recommended Solution: Use a Nitro server API endpoint as a proxy Create a file at server/api/graphql.ts in your Nuxt project:

// server/api/graphql.ts
import { proxyRequest } from 'h3'

export default defineEventHandler(async (event) => {
  // Forward the request to your Strapi backend
  return proxyRequest(event, '<http://localhost:1337/graphql'>)
})

// server/api/graphql.ts
import { proxyRequest } from 'h3'

export default defineEventHandler(async (event) => {
  // Forward the request to your Strapi backend
  return proxyRequest(event, '<http://localhost:1337/graphql'>)
})

This will ensure that any request to /graphql on your Nuxt app is proxied to your Strapi backend, and the client will never see the backend URL. Update your Apollo client config:

apollo: {
  clients: {
    default: {
      httpEndpoint: "/api/graphql", // Note the /api/ prefix for Nitro server endpoints
    },
  },
},

apollo: {
  clients: {
    default: {
      httpEndpoint: "/api/graphql", // Note the /api/ prefix for Nitro server endpoints
    },
  },
},

Key Points: - Do not use routeRules for proxying; use server middleware or Nitro API endpoints. - The proxyRequest utility from h3 is the recommended way to proxy in Nuxt 3 full-stack apps. - This approach keeps your backend URL hidden from the client and works seamlessly with Apollo. For more details and a video walkthrough of proxy strategies in Nuxt 3, see The BEST way to proxy your API in Nuxt. This method is also discussed as a recommended solution in the Nuxt community and Stack Overflow posts about proxying APIs in Nuxt 3 apps, especially when you want to keep backend URLs hidden from the client and leverage Nuxt's full-stack capabilities Nuxt SSR DEV mode: proxyRequest does not work with node 19+ (works with 18). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15h ago

<@222943229404774400> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Apollo | graphql | proxy

Did you find this page helpful?