Using GraphQL client in server routes / hiding API tokens from frontend

[lewebsimple]

When trying to execute a query from an API server route in my Nuxt 3 application, I get the following error:

[nuxt] [request error] [unhandled] [500] useAsyncQuery is not defined                                                                                                                                                               22:05:54
  at useCustomers (./.nuxt/dev/index.mjs:551:27)  
  at ./.nuxt/dev/index.mjs:571:27  
  at ./node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:630:47  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async Object.handler (./node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:681:19)  
  at async Server.toNodeHandle (./node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:745:7)

useAsyncQuery is called from a useCustomers composable which works just fine in pages and components.

For the record, I'm using multiple endpoints (Shopify Storefront API and Admin API) and I would like to hide the Admin API from the frontend since I don't want my token to leak publicly. Is this possible with Nuxt Apollo?

[slavanossar]

When using Nuxt 2 and the previous version of the module, I would just define my own Apollo clients to use in server API routes

import {
  ApolloClient,
  ApolloLink,
  InMemoryCache,
  HttpLink,
} from '@apollo/client/core'
import fetch from 'cross-fetch'

const {
  SHOPIFY_DOMAIN,
  SHOPIFY_API_VERSION,
  SHOPIFY_ADMIN_API_ACCESS_TOKEN,
} = process.env

const AdminLink = new HttpLink({
  uri: `https://${SHOPIFY_DOMAIN}/admin/api/${SHOPIFY_API_VERSION}/graphql`,
  headers: {
    accept: 'application/json',
    'X-Shopify-Access-Token': SHOPIFY_ADMIN_API_ACCESS_TOKEN,
  },
  fetch,
})

// Log query complexity and rate limit info
const ForwardExtensionsLink = new ApolloLink((operation, forward) => {
  return forward(operation).map((response) => {
    const { extensions } = response
    // Only triggers for queries with `fetchPolicy: 'no-cache'`
    if (process.env.NODE_ENV !== 'production' && extensions) {
      console.dir(extensions)
    }

    return response
  })
})

export const shopifyAdminClient = new ApolloClient({
  link: ForwardExtensionsLink.concat(AdminLink),
  cache: new InMemoryCache(),
})

You can then import it and use it in server routes, e.g.

import { shopifyAdminClient } from 'path/to/client.js`

shopifyAdminClient.mutate({
  // ...
})

From what I understand this module isn't meant to be used in server routes, although I may have misunderstood or it might have changed in the newest version with Composition API.