Using with Next.js

Using Next.JS/examples/with-apollo (Canary branch) as a demonstration project, I’m attempting to move the graphql ‘allPosts’ query to an external .gql file.

Having followed the instructions to implement this plugin, I’m getting an error that seems to suggest JSX processing is not happening:

error  in ./pages?entry
Syntax Error: Unexpected token (8:2)
   6 | 
   7 | export default withData(() => (
>  8 |   <App>
     |   ^

I am using latest versions of node, babel, next, etc. Should this work? Have I made an error somewhere?

The demonstration project can be found at https://github.com/gihrig/next-apollo-gql

OS: Mac 10.11.6 Node: 8.9.4 React: 16.2.0 Next: latest

Any help sincerely appreciated 😃

[gihrig]

@detrohutt Your assessment is spot on! All works as expected now. 💯

I didn’t realize that .babelrc overrode Next’s internal config. I assumed it extended it.

Thanks for taking the time to help me over a noob speed bump. 😄

[detrohutt]

@gihrig Sorry it took me so long to get around to this. Thanks for trying my package and thanks for taking the time to provide the steps you took.

I wrote the README.md to be generic for anyone using the package, not just Next.js users. My example .babelrc is generic, so if you were going to use it for Next.js it’d need to include their preset as described in the Next.js README.

I followed your directions to the point where I got the error, then used this .babelrc:

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-inline-import-graphql-ast"]
}

That fixed the error and I converted a single gql query to it’s own file and imported it to make sure it worked as expected, which it did. I don’t expect you’ll have any issues once you’ve added that top line to your .babelrc

As a side note, make sure you check out the Caveats section of my README because you’ll probably need to change your npm scripts in package.json to prepend them as described… i.e.

  "scripts": {
    "dev": "rm -rf node_modules/.cache && next",
    "build": "rm -rf node_modules/.cache && next build",
    "start": "rm -rf node_modules/.cache && next start"
  },

and then you’ll have to kill and rerun the command (i.e. yarn dev) each time you make a change to a .gql/.graphql file. Otherwise, the changes you make won’t be reflected in the running program, unfortunately.

I’m going to close this issue for now, but if you have any more problems you can reopen it. Good luck, thanks again, and enjoy the package!