Does the options api still work in v4?

[paltman]

I've upgraded to v4-alpha.14 and I'd like to defer rewriting all my components that are using the options api but they don't seem to be firing the queries when the components mount. I can't tell if I have things installed / setup wrongly (I followed the docs) or if that is just the expected state of things now and I should use the compose API instead for v4.

Any advice?

[paltman]

ok, figured it out.

I was configuring things like:

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
import { createApolloProvider } from '@vue/apollo-option';

const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
const { FIRST_GQL_URL, SECOND_GQL_URL } = window.MyAppConfig;

const firstHttpLink = createHttpLink({
  uri: FIRST_GQL_URL,
  headers: {
    'X-CSRFToken': csrftoken,
  },
});

const secondHttpLink = createHttpLink({
  uri: SECOND_GQL_URL,
  headers: {
    'X-CSRFToken': csrftoken,
  },
});

const firstClient = new ApolloClient({
  firstHttpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

const secondClient = new ApolloClient({
  secondHttpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

const firstProvider = createApolloProvider({
  defaultClient: firstClient,
});

const secondProvider = createApolloProvider({
  defaultClient: secondClient,
});

export default {
  firstProvider,
  secondProvider,
};

However, that was resulting in nothing getting executed. I dropped the createHttpLink and just added those options to the ApolloClient config when I noticed the auto-complete offering those options and bingo, works like a charm:

import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import { createApolloProvider } from '@vue/apollo-option';

const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
const { FIRST_GQL_URL, SECOND_GQL_URL } = window.MyAppConfig;

const firstClient = new ApolloClient({
  cache: new InMemoryCache(),
  connectToDevTools: true,
  uri: FIRST_GQL_URL,
  headers: {
    'X-CSRFToken': csrftoken,
  },
});

const secondClient = new ApolloClient({
  cache: new InMemoryCache(),
  connectToDevTools: true,
  uri: SECOND_GQL_URL,
  headers: {
    'X-CSRFToken': csrftoken,
  },
});

const firstProvider = createApolloProvider({
  defaultClient: firstClient,
});

const secondProvider = createApolloProvider({
  defaultClient: secondClient,
});

export default {
  firstProvider,
  secondProvider,
};

[Akryum]

Why the two different ApolloProvider though? One can have multiple clients

[paltman]

Didn't realize that but has no bearing on the problem, at least I don't think it does.