Giter VIP home page Giter VIP logo

Comments (7)

nodkz avatar nodkz commented on May 8, 2024 1

Thanks to you for pointing on this problem ;)
I'd completely rewrite this plugin 😉

from babel-plugin-transform-relay-hot.

nodkz avatar nodkz commented on May 8, 2024

Wow, good question. I totally forget that I have one more cool thing, which solve this problem. And this time it is a webpack plugin:

function noop() {}

function GraphQLRegeneratePlugin(options) {
  const opts = options || {};

  this.fileMaskRegexp = opts.fileMaskRegexp || /(\/_schema\/|\/app\/schema\.js)/i;
  this.buildFunc = opts.buildFunc
    || (() => { console.log('Error: webpack-graphql-plugin does not received buildFunc.'); });

  this.lastBuildTimestamp = Date.now();

  this.isNeededFile = (filepath) => this.fileMaskRegexp.test(filepath);

  this.needRebuild = (fileTimestamps, contextTimestamps) => {
    let timestamp = 0;
    let filepath = '';
    let ts = 0;
    Object.keys(fileTimestamps).filter(this.isNeededFile).forEach(file => {
      ts = fileTimestamps[file];
      if (!ts) timestamp = Infinity;
      if (ts > timestamp) { timestamp = ts; filepath = file; }
    });
    Object.keys(contextTimestamps).filter(this.isNeededFile).forEach(context => {
      ts = contextTimestamps[context];
      if (!ts) timestamp = Infinity;
      if (ts > timestamp) { timestamp = ts; filepath = context; }
    });

    if (timestamp > this.lastBuildTimestamp) {
      this.lastBuildTimestamp = Date.now();
      console.log(`Rebuild GraphQL schema: (due file change ${filepath})`);
      return true;
    }

    return false;
  };
}

GraphQLRegeneratePlugin.prototype.done = function done(stats) {
  if (this.needRebuild(stats.compilation.fileTimestamps, stats.compilation.contextTimestamps)) {
    this.buildFunc();
  }
};

GraphQLRegeneratePlugin.prototype.apply = function apply(compiler) {
  this.compiler = compiler;
  compiler.plugin('done', this.done.bind(this));
  // compiler.plugin('failed', this.failed.bind(this));
};

module.exports = GraphQLRegeneratePlugin;

And put this plugin to the server webpack config:

const serverConfig = {
  // ...
  plugins: [
    new GraphQLPlugin({
      fileMaskRegexp: /(\/schema\/)/i,
      buildFunc: async () => {
        // await del(['build/tmp/babel-cache/**']);
        const execOpts = { cwd: path.resolve(__dirname, '../'), stdio: [0, 1, 2] };
        cp.execSync('npm run generate-schema', execOpts);
      },
    }),
  ],

So right now if I changed some file in schema folder then webpack call buildFunc which call npm run generate-schema. You may put schema generating code instead of call npm command.

Try this solution, if it will be ok, let me know, I clean up and publish this as package to npm registry. And after that ask you to fix docs, due lack in my English 😜

from babel-plugin-transform-relay-hot.

lucasbento avatar lucasbento commented on May 8, 2024

@nodkz: that does look really good, the thing is that I don't use webpack on my servers, which makes me wonder the reasons for you to do so, besides using SSR, I guess.

I think you can create a package out of it, there are probably some people looking for something like that.

I only use npm scripts with babel, I think a good solution for it would be to have a babel plugin as babel-plugin-transform-relay-hot.

from babel-plugin-transform-relay-hot.

nodkz avatar nodkz commented on May 8, 2024

Oh, think that I misunderstood you.

Do you want to get a schema from the http server? Or how?

from babel-plugin-transform-relay-hot.

lucasbento avatar lucasbento commented on May 8, 2024

This is how I currently update my schema: https://github.com/lucasbento/graphql-pokemon/blob/master/package.json#L45.

The idea of this issue would be:

  1. Watch GraphQL files (types, mutations, etc), everything that may change the schema.json;
  2. Trigger a script (e.g. build-schema) every time one of these files are changed.

With that I wouldn't need to run build-schema manually.

from babel-plugin-transform-relay-hot.

nodkz avatar nodkz commented on May 8, 2024

Try to use one more nodemon providing to it masks of your graphql files.

So you will need run to terminals one for app's nodemon, another for tracking graphql-files

from babel-plugin-transform-relay-hot.

lucasbento avatar lucasbento commented on May 8, 2024

Hmm, that sounds good, gonna try doing that when I have a few free minutes.

Thanks for the help man, great job on webpack-plugin-graphql-schema-hot by the way!

from babel-plugin-transform-relay-hot.

Related Issues (6)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.