CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsapollovue-apollo
Johnny Metz
Johnny Metz

Reputation: 5995

Nuxt: choose client config other than default

I'm using Nuxt and Nuxt-Apollo to create my Vue application. I have the following apollo configuration in my nuxt.config.js file:

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:8000/graphql/'
      },
      stage: {
        httpEndpoint: 'https://example-stage.com/graphql/'
      }
      prod: {
        httpEndpoint: 'https://example.com/graphql/'
      }
    }
  }

How can I point to the stage or prod config. Every time I run the app it's pointing to the default config. There has to be somewhere I can set this.

Upvotes: 3

Views: 2818

Answers (2)

CACHAC
CACHAC

Reputation: 97

If you are using Pinia and Nuxt 3, you can use $apollo to select the desire client:

Assuming "prod" client:

actions: {
  async someQuery (){
    const { $apollo } = useNuxtApp()

    const response = await $apollo.clients.prod.query({
        query: gql` YOUR_GQL_QUERY  `,

        // you can add variables (OPTIONAL)
        variables: { YOUR_VARIABLES }
      })

     console.log(response.data)
  }
}

And assuming you already set module: '@nuxtjs/apollo'

Upvotes: 0

Emmanuel Neni
Emmanuel Neni

Reputation: 333

Assuming you're trying to access multiple clients not just the a different client for prod and dev this might help as is what i use for my current project.

    apollo: {
      includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
      authenticationType: 'Basic', // optional, default: 'Bearer'
      errorHandler: '~/apollo/customErrorHandler',
      clientConfigs: {
      default:
         {
           httpEndpoint:
             'https://me.something.com/api/graphql/query?token=******',
           httpLinkOptions: {
             credentials: 'same-origin'
           }
         },
        //  '~/apollo/clientConfig.js',
      otherClient: {
        httpEndpoint:
          'https://second-endpoint-gql.herokuapp.com/v1/graphql',
        httpLinkOptions: {
          credentials: 'same-origin'
        }
      }
    }
  },

Now all you need to do is to make your queries as normal but the difference is in the vue component.

/gql/allCars.gql

{
  allCars {
    id
    make
    model
    year
  }
}

Calls to default will go like this as normal:

<script>
import allcars from '~/gql/users'
export default {
  apollo: {
    allcars: {
      prefetch: true,
      query: allcars
    }
  },
  filters: {
    charIndex (i) {
      return String.fromCharCode(97 + i)
    }
  },
  head: {
    title: ....
  },
  data () {
    return {
      ...
    }
  }
}
</script>

Calls to secondary endpoints you'll need to add $client:

<script>
import allcars from '~/gql/users'
export default {
  apollo: {
    $client: 'otherClient',
    allcars: {
      prefetch: true,
      query: allcars
    }
  },
  filters: {
    charIndex (i) {
      return String.fromCharCode(97 + i)
    }
  },
  head: {
    title: ....
  },
  data () {
    return {
      ...
    }
  }
}
</script>

It is worth nothing that the apollo debugger only seems to query the last endpoint on the list of endpoint in apollo config, in my case that's 'otherClient'.

Reference to how I came to the above integration: Vue multiple client

Upvotes: 6

Related Questions