Use plugin-graphql with SSR

[mbajur]

Hello, I'm trying to use plugin-graphql with fresh nuxt.js app but details about that are not sufficient. I can see in FAQ that i need to use node-fetch and global.fetch = fetch but where exactly should i put that? In the store file definition? So far, my store/index.js looks as follows:

import VuexORM from '@vuex-orm/core'
import VuexORMGraphQL from '@vuex-orm/plugin-graphql'
import database from '~/db'
import fetch from 'node-fetch'

global.fetch = fetch

VuexORM.use(VuexORMGraphQL, { database })

export const plugins = [VuexORM.install(database)]

but app freezes (loading till infinity) when i'm trying to reach it in browser. Any tips much appreciated!

I'm using plugin-graphql ^1.0.0-rc.33

[phortx]

Hi!

My store/index.js:

import Vuex from 'vuex';
import VuexORM from '@vuex-orm/core';
import VuexORMGraphQL from '@vuex-orm/plugin-graphql';
import { HttpLink } from 'apollo-link-http';
import database from './database';
import fetch from 'node-fetch';

const options = {
  database,
  debug: process.env.NODE_ENV === 'development' && process.client,
  url: process.env.BACKEND_URL + '/api/v2',
};

if (process.server) {
  options.link = new HttpLink({ uri: options.url, fetch });
}

VuexORM.use(VuexORMGraphQL, options);


export default function createStore () {
  const plugins = [VuexORM.install(database)];
  return new Vuex.Store({ plugins });
}

Seems you're right, setting global.fetch is deprecated and probably doesn't work. I've simply setup a HttpLink instance and pass fetch. I will update the docs :)

Please let me know if this fixes your problem.

[mbajur]

That was it! Thank you :)

[phortx]

Nice, I'll update the docs :)

[phortx]

Done.

[renestalder]

Work like a charm. Don't you think it would be worth adding this as a separate page into the documentation (or at least to the setup page) instead of only the F.A.Q? SSR is quite a fundamental part of modern web applications and it took me quite some time finding this issue here for the concrete solution.

[phortx]

That's exactly what I have done 😎

https://github.com/vuex-orm/plugin-graphql/blob/master/docs/guide/nuxt.md

It's just not deployed yet :)

[renestalder]

🆒 🆒 🆒 :)

[kieuminhcanh]

I can not use fetch, customQuery or customMutate on Nuxt. Any one same?
#134