glennreyes / graphpack Goto Github PK

graphpack looks awesome. Would be great if it would work out-of-the-box with TypeScript! 💪

Whenever I run graphpack on my project, I am unable to make use of console.log - is this meant to happen? Because I'm not sure. If it is, is there a workaround?

Is it possible to integrate the package with an existing express.js application ?

So we can publish a separate babel-preset-graphpack.

Could anyone help to provide subscription server? I could not understand how to configure. I want to keep both http and ws protocol running via graphpack

Is there a way we can use https and wss today using the config?
I don't think so, but maybe you can correct me :-)

I am heavily using mocking, and am constantly editing graphpack.config.js. It would be nice if the server automatically restarted when it changes.

When importing other .graphql files from schema.graphql, building the server fails.

Minimal example in Codesandbox: https://codesandbox.io/s/q848mq9o1w

schema.graphql:

# import Post from "posts.graphql"

type Query {
  posts: [Post]
}

posts.graphql:

type Post {
  id: ID!
  text: String!
  tags: [String]
}

Output on the terminal:

I tried with v1.0.2 up to 1.0.8, also with "./posts.graphql", but without success. Any idea?

We need to be able to import the server instance to apply middlewares on it.

For example, in src/config.js adding following:

import { server } from 'graphpack';

server.applyMiddleware(/* ... */);

More details about applying middlewares in the Apollo Server docs.

Similar to webpack in #2 but with babel

Thanks for this amazing project, @glennreyes!

Reloading doesn't seem to happen properly on my machine. Compilation seems to happen correctly, but the old server code continues to run.

Setup:

• Followed the first steps of the Readme until running a development server.
• yarn.lock for package versions

Output in the terminal:

 DONE  Compiled successfully in 160ms                                                                                                                                        22:33:26

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::4000
    at Server.setupListenHandle [as _listen2] (net.js:1286:14)
    at listenInCluster (net.js:1334:12)
    at Server.listen (net.js:1421:7)
    at resolve (/Users/thomasklemm/Code/experiments/testing-graphpack/node_modules/apollo-server/dist/index.js:74:28)
    at new Promise (<anonymous>)
    at ApolloServer.<anonymous> (/Users/thomasklemm/Code/experiments/testing-graphpack/node_modules/apollo-server/dist/index.js:72:19)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/thomasklemm/Code/experiments/testing-graphpack/node_modules/apollo-server/dist/index.js:4:58)
Emitted 'error' event at:
    at Server.emit (events.js:182:13)
    at emitErrorNT (net.js:1313:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)

Hi guys,

I am trying to deploy a simple graphpack project to GAE, but can't get GAE to resolve dependencies like "apollo-server" properly

I have this in my package.json:

  "scripts": {
    "dev": "graphpack",
    "build": "graphpack build",
    "start": "node ./build/index.js"
  },
  "dependencies": {
    "graphpack": "^1.0.0-alpha.3"
  }

GAE is running npm start to start-up the deployed app and it fails saying this:

Cannot find module 'apollo-server'

It is supposed to resolve dependencies using package.json (I am not uploading node_modules). But for some reason having "graphpack" in dependecies doesn't make it resolve "apollo-server" 😕

Do I have to run graphpack build on the server before running npm start to make it resolve dependencies correctly? And in this case is there a way to run graphpack build with npm?

Similar to CRA, I've found it useful to have that supported out of the box.

Any documentation or guide for setting up debugger in visual studio code?

Hey
I just started to learn about GraphQL
Using graphpack was suggested by a guide on dev.to blog

I initialized a new project using yarn
Installed graphpack as suggested using yarn add -D graphpack
Created src dir, created index.js, resolvers.js and schema.graphql inside src just like the demo on CodeSandBox,
I added start to scripts in package.json
Tried to run it using yarn start/yarn run start

 DONE  Compiled successfully in 182ms                                 2:54:48 AM

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'core-js/proposals/array-flat-and-flat-map'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/home/alireza/Desktop/Tutorials/GraphQL/test/node_modules/apollo-env/lib/polyfills/array.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

I search alot in google, they were suggesting to install core-js global, even did that but didn't fix my problem

At last I took a look at your Demo, in package.json it was graphpack 1.0.2, So I tried the same stuff, but instead of yarn add -D graphpack I used yarn add -D [email protected] and the problem got fixed.

OS: Archlinux
Node Version: 10.15.1
Yarn Version: 1.13.0
NPM Version: 6.8.0

What can cause the problem with graphpack 1.0.6!?

How webpack to buildle './src/services/client' ?

const Client = require('./src/services/client')
module.exports = {
    ...
    dataSources: () => ({
	client: new Client(),
   }),
}

Greetings! Is it possible to configure graphpack to use some other folder? (not src, but let's say mock)

Hi, it's a feature request not a bug.

I think GraphQL schema could be more flexible than now.
For now, I have to define all GraphQL schema and resolver to schema.graphql, resolvers.js. I know resolvers are more options but not enough.

My proper structure for GraphQL is like this. each entry has own definitions.

src/
├── definitions
│   ├── groot
│   │   ├── groot.resolvers.js
│   │   └── groot.graphql
│   └── hello
│       ├── hello.resolvers.js
│       └── hello.graphql
└── index.js

3 directories, 5 files

However, this structure is not worked with graphqlpack. code sandbox has following error message.

Error: Couldn't find any resolvers. Please add resolvers to your src/resolvers.js
    at Module../node_modules/graphpack/lib/server.js

How about your thought on above GraphQL schema structure support?
I think merge-graphql-schemas can make things works easily. this repository will show you how to use the merge-graphql-schemas and what the benefits are. 😃

I've run into an error, but I'm not sure what has triggered it. Here is the error message:

 DONE  Compiled successfully in 1121ms                                                        
...\build\index.js:103
const explorer = cosmiconfig('graphpack').search();
                                          ^

TypeError: cosmiconfig(...).search is not a function
    at Object../node_modules/graphpack/config/index.js (...\build\index.js:103:43)
    at __webpack_require__ (...\build\index.js:21:30)
    at Module../node_modules/graphpack/lib/server.js (...\build\index.js:240:65)
    at __webpack_require__ (...\build\index.js:21:30)
    at Object.0 (...\build\index.js:700:18)
    at __webpack_require__ (...\build\index.js:21:30)
    at ...\build\index.js:85:18
    at Object.<anonymous> (...\build\index.js:88:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)

I've tried running graphpack and graphpack build then node ./build/index.js, but both methods throw this error.

Hey there 👋

Our bot, Adaptly, found that 21 out of 23 currently open dependency update PRs can be merged.
That's 91% right there:

🔎   How does Adaptly know this?

✨ Try Adaptly yourself

I'd like to move the server config in src/config.js into our graphpack.config.js, eg.:

// graphpack.config.js
module.exports = {
  webpack: ({ config }) => ({ ...config }),
  server: {
    playground: true,
    introspection: true,
  },
}

After #11 we should be able to pass middlewares like this:

// graphpack.config.js
const express = require('express');
const cors = require('cors');

const app = express();
// Additional middleware can be mounted at this point
app.use('*', jwtCheck, requireAuth, checkScope);

module.exports = {
  webpack: ({ config }) => ({ ...config }),
  server: {
    playground: true,
    introspection: true,
    applyMiddleware: { app },
  },
}

Note that graphpack.config.js is also used from outside of webpack. So ideally we can use both CommonJS or ES module imports in this file.

Similar to backpack, here we should be able to reconfigure things like webpack config, etc.

We should check how we could test graphpack using Travis CI.

The problem

While using graphpack in a multi projects setup with yarn, the error below is thrown.

As a workaround, the whole project using graphpack can be moved to yarn's nohoist.

The workaround
package.json:

{
  "workspaces": {
    "packages": [
      "applications/**/*"
    ],
    "nohoist": [
      "appname-with-graphpack/**"
    ]
  }
}

The error

 error  in /my-app/node_modules/graphpack/lib/server.js

Module build failed (from /my-app/node_modules/graphpack/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /my-app/node_modules/graphpack/lib/server.js: Cannot find module '@babel/preset-typescript' from '/my-app/applications/appname'
    at Function.module.exports [as sync] (/my-app/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)

 @ multi graphpack

/my-app/node_modules/graphpack/bin/graphpack.js:16
        throw Error(error || stats.toJson().errors);
        ^

Error: /my-app/node_modules/graphpack/lib/server.js
Module build failed (from /my-app/node_modules/graphpack/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /my-app/node_modules/graphpack/lib/server.js: Cannot find module '@babel/preset-typescript' from '/my-app/applications/appname'
    at Function.module.exports [as sync] (/my-app/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/my-app/node_modules/graphpack/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
 @ multi graphpack index[0]
    at Watching.compiler.watch.once (/my-app/node_modules/graphpack/bin/graphpack.js:16:15)
    at Watching.<anonymous> (/my-app/node_modules/graphpack/node_modules/ramda/src/once.js:34:17)
    at Watching.handler (/my-app/node_modules/graphpack/node_modules/ramda/src/internal/_arity.js:14:19)
    at compiler.hooks.done.callAsync (/my-app/node_modules/graphpack/node_modules/webpack/lib/Watching.js:98:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/my-app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/my-app/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/my-app/node_modules/graphpack/node_modules/webpack/lib/Watching.js:97:28)
    at onCompiled (/my-app/node_modules/graphpack/node_modules/webpack/lib/Watching.js:47:18)
    at hooks.afterCompile.callAsync.err (/my-app/node_modules/graphpack/node_modules/webpack/lib/Compiler.js:552:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/my-app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
error Command failed with exit code 1.

I see that graphpack supports TypeScript out of the box (#12), how about Flowtype? Would that only require adding a custom Babel configuration?

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (automergeMinor)

Not sure if this is graphpack specific, but the following issue exists:

// src/config.js
const env = { ...process.env }
console.log(env) // returns object like { ..., NODE_ENV: "production", ... }
console.log(env.NODE_ENV) // returns "production"
console.log(process.env) // returns object like { ..., NODE_ENV: "production", ... }
console.log(process.env.NODE_ENV) // returns "production"

If I run the code with following commands it works as expected and line 2 & 4 and line 3 & 5 return the same values.

NODE_ENV="production" graphpack
# OR
NODE_ENV="production" graphpack build
NODE_ENV="production" node ./build/index.js

If I run the code with

graphpack build
NODE_ENV="production" node ./build/index.js

I get the following result, which is highly inconsistent and may confuse people:

// src/config.js
const env = { ...process.env }
console.log(env) // returns object like { ..., NODE_ENV: "production", ... }
console.log(env.NODE_ENV) // returns "production"
console.log(process.env) // returns object with key NODE_ENV undefined
console.log(process.env.NODE_ENV) // returns "development"

Not a high prio, but highly appreciated if someone feels like designing a logo for Graphpack.