joshmenden

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'

async function getHeaders() {
  const headers = {}
  const jwt = // whatever logic you need to fetch your JWT, possible from pinia etc

  if (jwt) {
    headers['Authorization'] = `Bearer ${jwt}`
  }

joshmenden

const defaultOptions = {
  query: {
    errorPolicy: 'all',
  },
  mutate: {
    errorPolicy: 'all',
  },
}

function createClient(url) {

joshmenden

yarn add @vue/apollo-composable @apollo/client

joshmenden

export default function() {
  console.log('foo bar')
}

joshmenden

<script setup>
import { ref } from 'vue'
import gql from 'graphql-tag'

const MY_MUTATION = gql`
  mutation MyAwesomeMutation {
    // something awesome
  }
`

joshmenden

import { provide, createApp, h } from 'vue'
import { ApolloClients } from '@vue/apollo-composable'
import { UseApolloClients } from './src/util/useApolloClients.js'

import App from './App.vue'

// keep your URLs as env variables for easy dev/prod switching
const {
  VITE_GQL_URL_1: URL1,
  VITE_GQL_URL_2: URL2

joshmenden

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'

async function getHeaders() {
  const headers = {}
  const jwt = // whatever logic you need to fetch your JWT, possible from pinia etc

  if (jwt) {
    headers['Authorization'] = `Bearer ${jwt}`
  }

joshmenden

export default function (URL1, URL2) {
  return {
    default: createClient(URL1),
    // name this whatever you want instead of `otherClient`
    otherClient: createClient(URL2)
  }
}

joshmenden

const defaultOptions = {
  query: {
    errorPolicy: 'all',
  },
  mutate: {
    errorPolicy: 'all',
  },
}

function createClient(url) {

joshmenden

async function getHeaders() {
  const headers = {}
  const jwt = // whatever logic you need to fetch your JWT, possible from pinia etc

  if (jwt) {
    headers['Authorization'] = `Bearer ${jwt}`
  }

  headers['Content-Type'] = 'application/json'
  return headers