babel-blade docs

babel-blade docs

  • Docs
  • API
  • Help
  • GitHub
  • Roadmap
  • Blog

›Recent Posts

Recent Posts

  • 2 bugfixes v0.1.5
  • destructuring inside array functions
  • VSCode Extension
  • Array Methods
  • Writing semanticVisitor

2 bugfixes v0.1.5

November 9, 2018

swyx

swyx

2 bug reports came in from jonas:

  • Allow exporting queries directly
  • 3rd party fragments

Allow exporting queries directly

this doesnt work:

import { createQuery } from 'blade.macro';

export const pageQuery = createQuery(); // blade.macro: You can't replace this node, we've already removed it

const App = data => {
  const DATA = pageQuery(data);
  const movie = DATA.movie;
};

Usually if there is no export, what we do is just completely remove the reference. but if there is an export, we don't.

the removal is done here:

path.findParent(ppath => ppath.isVariableDeclaration()).remove();

I replace it with:

const razorParentPath = path.findParent(ppath => ppath.isVariableDeclaration());
if (!razorParentPath.parentPath.isExportNamedDeclaration()) {
  razorParentPath.remove(); // remove it unless its exported :)
}

So now that node is not removed, it is printing. i skip to the end insert query stage:

razor.replaceWith(graphqlOutput);

if exporting, the razor when it arrives at the insert query stage is now a ExportNamedDeclaration which is kind of indirect - having export const pageQuery = createQuery(); is nice but what if i need multiple declarations and only one of them is a createQuery or createFragment? i punted on it for now.

if (razor.isExportNamedDeclaration()) {
  // allow 1 export
  const decs = razor.get('declaration').get('declarations');
  if (decs.length > 1)
    throw new Error(
      'detected multiple export declarations in one line, you are restricted to 1 for now'
    );
  razor = decs[0].get('init');
}

fixed! latest: https://astexplorer.net/#/gist/01983f61e310f1eaf6b12a221556a937/3515d13c1002ea07af4f8548ddd970079ab32d62


3rd party fragments

import { createQuery } from 'blade.macro';

export const pageQuery = createQuery();

const Movie = {
  fragment: x => 'hi'
};
const App = data => {
  const DATA = pageQuery(data);
  const movie = DATA.movie(Movie.fragment);
};

currently does

export const pageQuery = `
query pageQuery{
  movie {
    ...Moviefragment
  }
}

`;
const Movie = {
  fragment: x => 'hi'
};

const App = data => {
  const DATA = data;
  const movie = DATA.movie(Movie.fragment);
};

we basically dont have a good story for fragment injection right now. I think this requires an API change so i will leave it for now.

Recent Posts
  • Allow exporting queries directly
  • 3rd party fragments
babel-blade docs
Docs
Getting StartedAPI Reference
Community
Twitter
More
BlogGitHubStar
MIT License. Maintained by @swyx