After upgrading Rails from 6.1.7 to 7.0.4 - @vue/apollo-composable useQuery doesn't do request

Question

I'm in the process of upgrading my app which uses the following stack:

gems:

rails 6.1.7
graphql 2.0.19

npms:

@apollo/client 3.7.10
@vue/apollo-composable ^4.0.0-beta.4
vue ^3.2.47

This works fine.

But if I upgrade rails to 7.0.4 there are no GraphQL requests made. There are no errors (neither on the backend or the frontend) but no network requests are made. What causes this? I tried stopping the frontend code with debugger and issued a useQuery from the console but nothing happens.

---

Further debugging:

Installed Postman, I can make the requests without issues. I tried in Firefox, Chrome and now Edge, no requests happen in any of them.

Maybe it's worth noting that I'm serving the JS modules via Vite (vite_rails). But I'm using the same in Rails 6.

I'm suspecting some CORS or XSS header change on the backend makes Apollo not even try to do the requests.

Answer 1

Found the issue. For some reason in Rails 7...

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

... placed in application.html.erb is not outputting anything.

In my application.js where I was building authLink I had:

const authLink = setContext((_, { headers }) => {
  const csrfToken = document.
    querySelector('meta[name="csrf-token"]').
    attributes.content.value;

  return {
    headers: {
      ...headers,
      'X-CSRF-Token': csrfToken,
      authorization: tokenStore.authorization,
    },
  }
})

Obviously something around csrfToken was failing silently as that meta tag did not exist on the page. And then I was using authLink in ApolloClient:

const apolloClient = new ApolloClient({
  link: authLink.concat(afterwareLink.concat(httpLink)),
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

So my whole apolloClient was broken and this is why no requests would fire.