Liya Gebre

Liya Gebre

1596921300

VueJS + Express + GraphQL Boilerplate

Vuexpresso

Vuexpresso is a skeleton app that uses the new techs like vue, vuex, graphql, webpack, apollo, between others (See complete list below).

Mainly inspired by

Getting Started

Note remember to have Mongo proccess running on the background or edit config/index.js with a cloud mongodb instance (default to localhost)

Take a look here to know how to run the mongo server

git clone https://github.com/Ethaan/vuexpresso.git
npm install -g babel-cli
yarn
yarn dev

Other Commands

yarn run storybook - Serves a play server using storybook

What includes

Graphql server

By default it runs a server on /graphql, in order to make the API calls, you can delete the part where the server is initialized on build/dev-server.js if you have an external API server

GraphiQL UI

default to /graphiql but you can change it on data/base-config.js;

Storybook UI.

It uses Storbook to render and test components much better in real time, check the official repo

Vuex Config.

Vuex is already all setup so you can only worry about adding modules, an example can be found here src/store/modules/notifications.js;

Vue Router

Routes live inside src/routes.js

Webpack

Using Webpack master example as reference, with slight modifications to make it work with ES6 and graphql

Jade & Stylus

You can easy remove Jade and stylus by simply removing them from the tag like <template lang="jade"></template => <template></template same for stylus.

Libraries and Technologies used

TODO

  • [x] Build for Production

Download Details:

Author: Ethaan

Source Code: https://github.com/Ethaan/vuexpresso

#vue #graphql #vuejs #vue-js

What is GEEK

Buddha Community

VueJS + Express + GraphQL Boilerplate

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Liya Gebre

Liya Gebre

1596921300

VueJS + Express + GraphQL Boilerplate

Vuexpresso

Vuexpresso is a skeleton app that uses the new techs like vue, vuex, graphql, webpack, apollo, between others (See complete list below).

Mainly inspired by

Getting Started

Note remember to have Mongo proccess running on the background or edit config/index.js with a cloud mongodb instance (default to localhost)

Take a look here to know how to run the mongo server

git clone https://github.com/Ethaan/vuexpresso.git
npm install -g babel-cli
yarn
yarn dev

Other Commands

yarn run storybook - Serves a play server using storybook

What includes

Graphql server

By default it runs a server on /graphql, in order to make the API calls, you can delete the part where the server is initialized on build/dev-server.js if you have an external API server

GraphiQL UI

default to /graphiql but you can change it on data/base-config.js;

Storybook UI.

It uses Storbook to render and test components much better in real time, check the official repo

Vuex Config.

Vuex is already all setup so you can only worry about adding modules, an example can be found here src/store/modules/notifications.js;

Vue Router

Routes live inside src/routes.js

Webpack

Using Webpack master example as reference, with slight modifications to make it work with ES6 and graphql

Jade & Stylus

You can easy remove Jade and stylus by simply removing them from the tag like <template lang="jade"></template => <template></template same for stylus.

Libraries and Technologies used

TODO

  • [x] Build for Production

Download Details:

Author: Ethaan

Source Code: https://github.com/Ethaan/vuexpresso

#vue #graphql #vuejs #vue-js

Jack  Shaw

Jack Shaw

1642442400

Vuexpresso: VueJS + Express + GraphQL Boilerplate

Vuexpresso

Vuexpresso is a skeleton app that uses the new techs like vue, vuex, graphql, webpack, apollo, between others (See complete list below).

Mainly inspired by

Getting Started

Note remember to have Mongo proccess running on the background or edit config/index.js with a cloud mongodb instance (default to localhost)

Take a look here to know how to run the mongo server

git clone https://github.com/Ethaan/vuexpresso.gitnpm install -g babel-cliyarnyarn dev

Other Commands

yarn run storybook - Serves a play server using storybook

What includes

Graphql server

By default it runs a server on /graphql, in order to make the API calls, you can delete the part where the server is initialized on build/dev-server.js if you have an external API server

GraphiQL UI

default to /graphiql but you can change it on data/base-config.js;

Storybook UI.

It uses Storbook to render and test components much better in real time, check the official repo

Vuex Config.

Vuex is already all setup so you can only worry about adding modules, an example can be found here src/store/modules/notifications.js;

Vue Router

Routes live inside src/routes.js

Webpack

Using Webpack master example as reference, with slight modifications to make it work with ES6 and graphql

Jade & Stylus

You can easy remove Jade and stylus by simply removing them from the tag like <template lang="jade"></template => <template></template same for stylus.

Libraries and Technologies used

Express

VueJS

Storybook

Vuex

Vue-Router

Vue-Apollo

Apollo-client

GraphQL

Webpack

Pug

Stylus

Lodash

Babel

Mongo

Eslint

TODO

  • Build for Production3

Author: Ethaan
Source Code: https://github.com/Ethaan/vuexpresso
License: MIT

#express #vue #graphql 

Elm Graphql: Autogenerate Type-safe GraphQL Queries in Elm

dillonkearns/elm-graphql  

Why use this package over the other available Elm GraphQL packages? This is the only one that generates type-safe code for your entire schema. Check out this blog post, Type-Safe & Composable GraphQL in Elm, to learn more about the motivation for this library. (It's also the only type-safe library with Elm 0.18 or 0.19 support, see this discourse thread).

I built this package because I wanted to have something that:

  1. Gives you type-safe GraphQL queries (if it compiles, it's valid according to the schema),
  2. Creates decoders for you in a seamless and failsafe way, and
  3. Eliminates GraphQL features in favor of Elm language constructs where possible for a simpler UX (for example, GraphQL variables & fragments should just be Elm functions, constants, lets).

See an example in action on Ellie. See more end-to-end example code in the examples/ folder.

Overview

dillonkearns/elm-graphql is an Elm package and accompanying command-line code generator that creates type-safe Elm code for your GraphQL endpoint. You don't write any decoders for your API with dillonkearns/elm-graphql, instead you simply select which fields you would like, similar to a standard GraphQL query but in Elm. For example, this GraphQL query

query {
  human(id: "1001") {
    name
    homePlanet
  }
}

would look like this in dillonkearns/elm-graphql (the code in this example that is prefixed with StarWars is auto-generated)

import Graphql.Operation exposing (RootQuery)
import Graphql.SelectionSet as SelectionSet exposing (SelectionSet)
import StarWars.Object
import StarWars.Object.Human as Human
import StarWars.Query as Query
import StarWars.Scalar exposing (Id(..))


query : SelectionSet (Maybe HumanData) RootQuery
query =
    Query.human { id = Id "1001" } humanSelection


type alias HumanData =
    { name : String
    , homePlanet : Maybe String
    }


humanSelection : SelectionSet HumanData StarWars.Object.Human
humanSelection =
    SelectionSet.map2 HumanData
        Human.name
        Human.homePlanet

GraphQL and Elm are a perfect match because GraphQL is used to enforce the types that your API takes as inputs and outputs, much like Elm's type system does within Elm. elm-graphql simply bridges this gap by making your Elm code aware of your GraphQL server's schema. If you are new to GraphQL, graphql.org/learn/ is an excellent way to learn the basics.

After following the installation instructions to install the @dillonkearns/elm-graphql NPM package and the proper Elm packages (see the Setup section for details). Once you've installed everything, running the elm-graphql code generation tool is as simple as this:

npx elm-graphql https://elm-graphql.herokuapp.com --base StarWars --output examples/src

If headers are required, such as a Bearer Token, the --header flag can be supplied.

npx elm-graphql https://elm-graphql.herokuapp.com --base StarWars --output examples/src --header 'headerKey: header value'

Learning Resources

There is a thorough tutorial in the SelectionSet docs. SelectionSets are the core concept in this library, so I recommend reading through the whole page (it's not very long!).

The examples/ folder is another great place to start.

If you want to learn more GraphQL basics, this is a great tutorial, and a short read: graphql.org/learn/

My Elm Conf 2018 talk goes into the philosophy behind dillonkearns/elm-graphql

Types Without Borders Elm Conf Talk

(Skip to 13:06 to go straight to the dillonkearns/elm-graphql demo).

If you're wondering why code is generated a certain way, you're likely to find an answer in the Frequently Asked Questions (FAQ).

There's a very helpful group of people in the #graphql channel in the Elm Slack. Don't hesitate to ask any questions about getting started, best practices, or just general GraphQL in there!

Setup

dillonkearns/elm-graphql generates Elm code that allows you to build up type-safe GraphQL requests. Here are the steps to setup dillonkearns/elm-graphql.

Add the dillonkearns/elm-graphql elm package as a dependency in your elm.json. You will also need to make sure that elm/json is a dependency of your project since the generated code has lots of JSON decoders in it.

elm install dillonkearns/elm-graphql
elm install elm/json

Install the @dillonkearns/elm-graphql command line tool through npm. This is what you will use to generate Elm code for your API. It is recommended that you save the @dillonkearns/elm-graphql command line tool as a dev dependency so that everyone on your project is using the same version.

npm install --save-dev @dillonkearns/elm-graphql
# you can now run it locally using `npx elm-graphql`,
# or by calling it through an npm script as in this project's package.json

Run the @dillonkearns/elm-graphql command line tool installed above to generate your code. If you used the --save-dev method above, you can simply create a script in your package.json like the following:

{
  "name": "star-wars-elm-graphql-project",
  "version": "1.0.0",
  "scripts": {
    "api": "elm-graphql https://elm-graphql.herokuapp.com/api --base StarWars"
  }

With the above in your package.json, running npm run api will generate dillonkearns/elm-graphql code for you to call in ./src/StarWars/. You can now use the generated code as in this Ellie example or in the examples folder.

Subscriptions Support

You can do real-time APIs using GraphQL Subscriptions and dillonkearns/elm-graphql. Just wire in the framework-specific JavaScript code for opening the WebSocket connection through a port. Here's a live demo and its source code. The demo server is running Elixir/Absinthe.

Contributors

Thank you Mario Martinez (martimatix) for all your feedback, the elm-format PR, and for the incredible logo design!

Thank you Mike Stock (mikeastock) for setting up Travis CI!

Thanks for the reserved words pull request @madsflensted!

A huge thanks to @xtian for doing the vast majority of the 0.19 upgrade work! :tada:

Thank you Josh Adams (@knewter) for the code example for Subscriptions with Elixir/Absinthe wired up through Elm ports!

Thank you Romario for adding OptionalArgument.map!

Thank you Aaron White for your pull request to improve the performance and stability of the elm-format step! 🎉

Roadmap

All core features are supported. That is, you can build any query or mutation with your dillonkearns/elm-graphql-generated code, and it is guaranteed to be valid according to your server's schema.

dillonkearns/elm-graphql will generate code for you to generate subscriptions and decode the responses, but it doesn't deal with the low-level details for how to send them over web sockets. To do that, you will need to use custom code or a package that knows how to communicate over websockets (or whichever protocol) to setup a subscription with your particular framework. See this discussion for why those details are not handled by this library directly.

I would love to hear feedback if you are using GraphQL Subscriptions. In particular, I'd love to see live code examples to drive any improvements to the Subscriptions design. Please ping me on Slack, drop a message in the #graphql channel, or open up a Github issue to discuss!

I would like to investigate generating helpers to make pagination simpler for Connections (based on the Relay Cursor Connections Specification). If you have ideas on this chime in on this thread.

See the full roadmap on Trello.


Author: dillonkearns
Source Code: https://github.com/dillonkearns/elm-graphql
License: View license

#graphql 

Jamie  Graham

Jamie Graham

1642323180

Express-graphql: Create A GraphQL HTTP Server with Express

GraphQL HTTP Server Middleware

Create a GraphQL HTTP server with any HTTP web framework that supports connect styled middleware, including Connect itself, Express and Restify.

Installation

npm install --save express-graphql

TypeScript

This module includes a TypeScript declaration file to enable auto complete in compatible editors and type information for TypeScript projects.

Simple Setup

Just mount express-graphql as a route handler:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');

const app = express();

app.use(
  '/graphql',
  graphqlHTTP({
    schema: MyGraphQLSchema,
    graphiql: true,
  }),
);

app.listen(4000);

Setup with Restify

Use .get or .post (or both) rather than .use to configure your route handler. If you want to show GraphiQL in the browser, set graphiql: true on your .get handler.

const restify = require('restify');
const { graphqlHTTP } = require('express-graphql');

const app = restify.createServer();

app.post(
  '/graphql',
  graphqlHTTP({
    schema: MyGraphQLSchema,
    graphiql: false,
  }),
);

app.get(
  '/graphql',
  graphqlHTTP({
    schema: MyGraphQLSchema,
    graphiql: true,
  }),
);

app.listen(4000);

Setup with Subscription Support

const express = require('express');
const { graphqlHTTP } = require('express-graphql');

const typeDefs = require('./schema');
const resolvers = require('./resolvers');
const { makeExecutableSchema } = require('graphql-tools');
const schema = makeExecutableSchema({
  typeDefs: typeDefs,
  resolvers: resolvers,
});

const { execute, subscribe } = require('graphql');
const { createServer } = require('http');
const { SubscriptionServer } = require('subscriptions-transport-ws');

const PORT = 4000;

var app = express();

app.use(
  '/graphql',
  graphqlHTTP({
    schema: schema,
    graphiql: { subscriptionEndpoint: `ws://localhost:${PORT}/subscriptions` },
  }),
);

const ws = createServer(app);

ws.listen(PORT, () => {
  // Set up the WebSocket for handling GraphQL subscriptions.
  new SubscriptionServer(
    {
      execute,
      subscribe,
      schema,
    },
    {
      server: ws,
      path: '/subscriptions',
    },
  );
});

Options

The graphqlHTTP function accepts the following options:

schema: A GraphQLSchema instance from GraphQL.js. A schema must be provided.

graphiql: If true, presents GraphiQL when the GraphQL endpoint is loaded in a browser. We recommend that you set graphiql to true when your app is in development, because it's quite useful. You may or may not want it in production. Alternatively, instead of true you can pass in an options object:

defaultQuery: An optional GraphQL string to use when no query is provided and no stored query exists from a previous session. If undefined is provided, GraphiQL will use its own default query.

headerEditorEnabled: An optional boolean which enables the header editor when true. Defaults to false.

subscriptionEndpoint: An optional GraphQL string contains the WebSocket server url for subscription.

websocketClient: An optional GraphQL string for websocket client used for subscription, v0: subscriptions-transport-ws, v1: graphql-ws. Defaults to v0 if not provided

rootValue: A value to pass as the rootValue to the execute() function from GraphQL.js/src/execute.js.

context: A value to pass as the contextValue to the execute() function from GraphQL.js/src/execute.js. If context is not provided, the request object is passed as the context.

pretty: If true, any JSON response will be pretty-printed.

extensions: An optional function for adding additional metadata to the GraphQL response as a key-value object. The result will be added to the "extensions" field in the resulting JSON. This is often a useful place to add development time metadata such as the runtime of a query or the amount of resources consumed. This may be an async function. The function is given one object as an argument: { document, variables, operationName, result, context }.

validationRules: Optional additional validation rules that queries must satisfy in addition to those defined by the GraphQL spec.

customValidateFn: An optional function which will be used to validate instead of default validate from graphql-js.

customExecuteFn: An optional function which will be used to execute instead of default execute from graphql-js.

customFormatErrorFn: An optional function which will be used to format any errors produced by fulfilling a GraphQL operation. If no function is provided, GraphQL's default spec-compliant formatError function will be used.

customParseFn: An optional function which will be used to create a document instead of the default parse from graphql-js.

formatError: is deprecated and replaced by customFormatErrorFn. It will be removed in version 1.0.0.

In addition to an object defining each option, options can also be provided as a function (or async function) which returns this options object. This function is provided the arguments (request, response, graphQLParams) and is called after the request has been parsed.

The graphQLParams is provided as the object { query, variables, operationName, raw }.

app.use(
  '/graphql',
  graphqlHTTP(async (request, response, graphQLParams) => ({
    schema: MyGraphQLSchema,
    rootValue: await someFunctionToGetRootValue(request),
    graphiql: true,
  })),
);

HTTP Usage

Once installed at a path, express-graphql will accept requests with the parameters:

query: A string GraphQL document to be executed.

variables: The runtime values to use for any GraphQL query variables as a JSON object.

operationName: If the provided query contains multiple named operations, this specifies which operation should be executed. If not provided, a 400 error will be returned if the query contains multiple named operations.

raw: If the graphiql option is enabled and the raw parameter is provided, raw JSON will always be returned instead of GraphiQL even when loaded from a browser.

GraphQL will first look for each parameter in the query string of a URL:

/graphql?query=query+getUser($id:ID){user(id:$id){name}}&variables={"id":"4"}

If not found in the query string, it will look in the POST request body.

If a previous middleware has already parsed the POST body, the request.body value will be used. Use multer or a similar middleware to add support for multipart/form-data content, which may be useful for GraphQL mutations involving uploading files. See an example using multer.

If the POST body has not yet been parsed, express-graphql will interpret it depending on the provided Content-Type header.

application/json: the POST body will be parsed as a JSON object of parameters.

application/x-www-form-urlencoded: the POST body will be parsed as a url-encoded string of key-value pairs.

application/graphql: the POST body will be parsed as GraphQL query string, which provides the query parameter.

Combining with Other Express Middleware

By default, the express request is passed as the GraphQL context. Since most express middleware operates by adding extra data to the request object, this means you can use most express middleware just by inserting it before graphqlHTTP is mounted. This covers scenarios such as authenticating the user, handling file uploads, or mounting GraphQL on a dynamic endpoint.

This example uses express-session to provide GraphQL with the currently logged-in session.

const session = require('express-session');
const { graphqlHTTP } = require('express-graphql');

const app = express();

app.use(session({ secret: 'keyboard cat', cookie: { maxAge: 60000 } }));

app.use(
  '/graphql',
  graphqlHTTP({
    schema: MySessionAwareGraphQLSchema,
    graphiql: true,
  }),
);

Then in your type definitions, you can access the request via the third "context" argument in your resolve function:

new GraphQLObjectType({
  name: 'MyType',
  fields: {
    myField: {
      type: GraphQLString,
      resolve(parentValue, args, request) {
        // use `request.session` here
      },
    },
  },
});

Providing Extensions

The GraphQL response allows for adding additional information in a response to a GraphQL query via a field in the response called "extensions". This is added by providing an extensions function when using graphqlHTTP. The function must return a JSON-serializable Object.

When called, this is provided an argument which you can use to get information about the GraphQL request:

{ document, variables, operationName, result, context }

This example illustrates adding the amount of time consumed by running the provided query, which could perhaps be used by your development tools.

const { graphqlHTTP } = require('express-graphql');

const app = express();

const extensions = ({
  document,
  variables,
  operationName,
  result,
  context,
}) => {
  return {
    runTime: Date.now() - context.startTime,
  };
};

app.use(
  '/graphql',
  graphqlHTTP((request) => {
    return {
      schema: MyGraphQLSchema,
      context: { startTime: Date.now() },
      graphiql: true,
      extensions,
    };
  }),
);

When querying this endpoint, it would include this information in the result, for example:

{
  "data": { ... },
  "extensions": {
    "runTime": 135
  }
}

Additional Validation Rules

GraphQL's validation phase checks the query to ensure that it can be successfully executed against the schema. The validationRules option allows for additional rules to be run during this phase. Rules are applied to each node in an AST representing the query using the Visitor pattern.

A validation rule is a function which returns a visitor for one or more node Types. Below is an example of a validation preventing the specific field name metadata from being queried. For more examples, see the specifiedRules in the graphql-js package.

import { GraphQLError } from 'graphql';

export function DisallowMetadataQueries(context) {
  return {
    Field(node) {
      const fieldName = node.name.value;

      if (fieldName === 'metadata') {
        context.reportError(
          new GraphQLError(
            `Validation: Requesting the field ${fieldName} is not allowed`,
          ),
        );
      }
    },
  };
}

Disabling introspection

Disabling introspection does not reflect best practices and does not necessarily make your application any more secure. Nevertheless, disabling introspection is possible by utilizing the NoSchemaIntrospectionCustomRule provided by the graphql-js package.

import { NoSchemaIntrospectionCustomRule } from 'graphql';

app.use(
  '/graphql',
  graphqlHTTP((request) => {
    return {
      schema: MyGraphQLSchema,
      validationRules: [NoSchemaIntrospectionCustomRule],
    };
  }),
);

Other Exports

getGraphQLParams(request: Request): Promise<GraphQLParams>

Given an HTTP Request, this returns a Promise for the parameters relevant to running a GraphQL request. This function is used internally to handle the incoming request, you may use it directly for building other similar services.

const { getGraphQLParams } = require('express-graphql');

getGraphQLParams(request).then((params) => {
  // do something...
});

Debugging Tips

During development, it's useful to get more information from errors, such as stack traces. Providing a function to customFormatErrorFn enables this:

customFormatErrorFn: (error) => ({
  message: error.message,
  locations: error.locations,
  stack: error.stack ? error.stack.split('\n') : [],
  path: error.path,
});

Experimental features

Each release of express-graphql will be accompanied by an experimental release containing support for the @defer and @stream directive proposal. We are hoping to get community feedback on these releases before the proposal is accepted into the GraphQL specification. You can use this experimental release of express-graphql by adding the following to your project's package.json file.

"express-graphql": "experimental-stream-defer",
"graphql": "experimental-stream-defer"

Community feedback on this experimental release is much appreciated and can be provided on the PR for the defer-stream branch or the GraphQL.js issue for feedback.

Contributing to this repo

This repository is managed by EasyCLA. Project participants must sign the free GraphQL Specification Membership agreement before making a contribution. You only need to do this one time, and it can be signed by individual contributors or their employers.

To initiate the signature process please open a PR against this repo. The EasyCLA bot will block the merge if we still need a membership agreement from you.

You can find detailed information here. If you have issues, please email operations@graphql.org.

If your company benefits from GraphQL and you would like to provide essential financial support for the systems and people that power our community, please also consider membership in the GraphQL Foundation.

Download Details:
Author: graphql
Source Code: https://github.com/graphql/express-graphql
License: MIT License

#graphql #express #typescript #javascript