SSR: Do not (re)fetch data on the client

[LukasBombach]

Hi

We're using vue-apollo with SSR and prefetch all of our data. Now the client automatically refetches our data and because the server we fetch the data from is not public our page renders nicely and then goes blank after the client has failed to fetch the data.

• Is there a way to disable fetching the data on the client completely
• Or is there a way to disable refetching specific data on the client, which would be more what we would be looking for (because in the future we want to make some data public)

Thanks ✌️

[Austio]

Hey best way i could think of handling this would to have a fetch policy of network-only on the server and on the client use cache-only

    ~fetchPolicy() {
      return this.$isServer ? 'network-only' : 'cache-only';
    },~

   fetchPolicy: process.server ? 'network-only' : 'cache-only';

[Akryum]

I'm not entirely sure I understand what the issue is about.

[LukasBombach]

@Akryum We want to use GraphQL only on the server and want to use Smart Queries and not asyncData.

To be very precise, but this shall not be part of this ticket. We have a private GraphQL server for some data and a public GraphQL server for some other data. In the end we want to make the server use the private GraphQL server only and the client use the public GraphQL server only. And the client should not fire the server queries. That is why for now we want to only use GraphQL on the server.

And for @Austio thank you so much! That answer is 💯 🎯 !

I can't seem to get it to work quite right though. This is my nuxt config:

  apollo: {
    clientConfigs: {
      default: '@/apollo/config/default.js',
    },
  },

And this is the export of @/apollo/config/default.js

export default () => {
  console.log('fetch policy', process.server ? 'network-only' : 'cache-only');
  return {
    httpEndpoint: process.env.GRAPHQL_ENDPOINT,
    wsEndpoint: null,
    tokenName: process.env.GRAPHQL_TOKEN,
    cache: new InMemoryCache({ fragmentMatcher }),
    fetchPolicy: process.server ? 'network-only' : 'cache-only',
  };
};

As you can see I am logging the fetch policy and also use that as a settings and the logging is right, but the client does network-stuff and tries to re-fetch the data.

I have also tried this:

    $query: {
      fetchPolicy: process.server ? 'network-only' : 'cache-only',
    },

but no cigar

[Akryum]

Then you can just change the GraphQL endpoint in the configuration depending on whether it's on the client or the server, and let vue-apollo use serverPrefetch.

[LukasBombach]

I was hoping I could use Smart Query but that is not possible right?

[Akryum]

You can.

[LukasBombach]

Hey @Akryum

sorry I was trying for a few days but I can't figure it out. This is basically the question I had in this issue. Sorry to bother.

[Austio]

@LukasBombach could you post up something in a reproduction state? what i recommended should work but may be something else that i'm missing.

[jeissler]

@Austio I'm having a similar issue and and thought what you suggested should work but I'm not having any luck. I've a similar setup to the above discussed vue-apollo; what I'm trying to do is always get fresh data from the server after a client mutation + refetching query. Everything is good when on the client (w/ refetch), but then when I hard refresh the page I still get old cached data from the server no matter how I set fetch policy using the process flags. What might I be missing for this to work correctly? Any help is much appreciated!

I've tried different variations of this but currently my fetchPolicy looks like:

fetchPolicy() {
  return this.$isServer ? "no-cache" : "cache-first";
}

[Austio]

hmmm, will gander at this here in a bit, have you inspected the apollo object that is dispatching your query?

[jeissler]

@Austio that would be great! I have inspected it to my best degree and find SSR fetchPolicy seems hard coded to network-only; which unfortunately furthers my confusion on why I wouldn't always be getting fresh data from the server (ie injected state).

[Austio]

@jeissler, so looks like what you are seeing for network-only because that is what is default if nothing is passed

// smart-query.js
if (this.vm.$isServer) {
  this.options.fetchPolicy = 'network-only'
}

The reason it is not getting values is because fetchPolicy is not a function it is a string,

//watchQueryOptions.d.ts
export declare type FetchPolicy = 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby';

So my bad for suggesting that, the fix is pretty simple though, you can declare that an expression (non function)

This worked for me because i set process.server as true on the server through nuxt, you will need to use something that will evaluate to true if you are on the server that is not bound to this

apollo: {
  user: {
     ...,
     fetchPolicy: process.server ? 'cache-first' : 'cache-only',
  }
}

[Austio]

@LukasBombach

[Austio]

@Akryum when a fetchPolicy is specified on the server, does it make sense to not force it to be networkOnly?

During SSR i could see being able to not make some requests as being a huge benefit, for instance if we have several places that request data for a user releated to various things like flags. Even if we have a new key of serverFetchPolicy so that it can be opted into if we want to go that far.

[thebspin]

We are having the same issue as mentioned in this ticket.
Using a smart query we would only like the server to do the graphql call and that happens nicely, but then the client does it aswell resulting in a blank screen. I tried what is mentioned here about the caching but that does not make any difference in our case.

So in short how can i use a smarty query that only runs on the server and won't automatically rerun on the client?