Skip to content

Commit 2110cd3

Browse files
juicycleffjuicycleff
committed
updated basic readme
1 parent 88030fa commit 2110cd3

File tree

2 files changed

+79
-110
lines changed

2 files changed

+79
-110
lines changed

‎basic/README.md

+79-103
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,79 @@
1-
# vue-fullstack-apollo-basic
2-
3-
🚀 Basic starter code for a fullstack app based on Vue, GraphQL & Apollo Client.
4-
5-
![](https://imgur.com/LG6r1q1.png)
6-
7-
## TODO
8-
9-
- [ ] fix runtime issues
10-
- [ ] update to Apollo Client 2.0
11-
- [ ] enable in [ https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts](https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts)
12-
13-
## Technologies
14-
15-
* **Frontend**
16-
* [Vue](https://vuejs.org/): Frontend framework for building user interfaces
17-
* [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client
18-
* **Backend**
19-
* [Graphcool](https://www.graph.cool): Powerful GraphQL database
20-
* [`graphql-yoga`](https://github.com/graphcool/graphql-yoga/): Fully-featured GraphQL server with focus on easy setup, performance & great developer experience
21-
* [`graphcool-binding`](https://github.com/graphcool/graphcool-binding): GraphQL binding for Graphcool services
22-
23-
## Requirements
24-
25-
You need to have the following things installed:
26-
27-
* Node 8+
28-
* Graphcool CLI: `npm i -g graphcool@beta`
29-
* GraphQL CLI: `npm i -g graphql-cli`
30-
* GraphQL Playground desktop app (optional): [Download](https://github.com/graphcool/graphql-playground/releases)
31-
32-
## Preview
33-
34-
![](http://imgur.com/3S6fUeI.gif)
35-
36-
## Getting started
37-
38-
```sh
39-
# Bootstrap GraphQL server in directory `my-app`, based on `vue-fullstack-basic` boilerplate
40-
graphql create my-app --boilerplate vue-fullstack-basic
41-
42-
# Navigate into the new project's `server` directory
43-
cd my-app/server
44-
45-
# Deploy the Graphcool database & start the server (runs on http://localhost:4000)
46-
yarn start
47-
48-
# Navigate back into the project's root directory and launch the Vue app
49-
cd ..
50-
yarn start # open http://localhost:3000 in your browser
51-
```
52-
53-
<details>
54-
55-
<summary>Alternative: Clone repo</summary>
56-
57-
```sh
58-
TODO
59-
```
60-
61-
</details>
62-
63-
## Docs
64-
65-
### Project structure
66-
67-
#### `/server`
68-
69-
- [`.graphqlconfig.yml`](./server/.graphqlconfig.yml) GraphQL configuration file containing the endpoints and schema configuration. Used by the [`graphql-cli`](https://github.com/graphcool/graphql-cli) and the [GraphQL Playground](https://github.com/graphcool/graphql-playground). See [`graphql-config`](https://github.com/graphcool/graphql-config) for more information.
70-
- [`graphcool.yml`](./server/graphcool.yml): The root configuration file for your database service ([documentation](https://www.graph.cool/docs/1.0/reference/graphcool.yml/overview-and-example-foatho8aip)).
71-
72-
#### `/server/database`
73-
74-
- [`database/datamodel.graphql`](./server/database/datamodel.graphql) contains the data model that you define for the project (written in [SDL](https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51)).
75-
- [`database/schema.generated.graphql`](./server/database/schema.generated.graphql) defines the **database schema**. It contains the definition of the CRUD API for the types in your data model and is generated based on your `datamodel.graphql`. **You should never edit this file manually**, but introduce changes only by altering `datamodel.graphql` and run `graphcool deploy`.
76-
77-
#### `/server/src`
78-
79-
- [`src/schema.graphql`](src/schema.graphql) defines your **application schema**. It contains the GraphQL API that you want to expose to your client applications.
80-
- [`src/index.js`](src/index.js) is the entry point of your server, pulling everything together and starting the `GraphQLServer` from [`graphql-yoga`](https://github.com/graphcool/graphql-yoga).
81-
82-
### Common questions
83-
84-
#### I'm getting a 'Schema could not be fetched.' error after deploying, what gives?
85-
86-
Access to the Graphcool API is secured by a secret. This also applies to the introspection query. Using the latest version of GraphQL Playground, the `Authorization` header should automatically be setup with a proper JWT signing the secret. If that's not the case, you can follow these steps to access your API:
87-
88-
1. Visit http://jwtbuilder.jamiekurtz.com/
89-
1. Replace the `Key` at the bottom of the page with your `secret` from the [`graphcool.yml`](./server/graphcool.yml#L5)
90-
1. Click `Create signed JWT` and copy the obtained token
91-
1. Now, to access the schema, use the `Authorization: Bearer <token>` header, or in the GraphQL Playground set it as JSON:
92-
```json
93-
{
94-
"Authorization": "Bearer <token>"
95-
}
96-
```
97-
1. Reload the schema in the Playground (the _refresh_-button is located right next to the URL of the server)
98-
99-
> Note: Currently, no content of the signed JWT is verified by the database! This will be implemented [according to this proposal](https://github.com/graphcool/framework/issues/1365) at a later stage.
100-
101-
## Contributing
102-
103-
Your feedback is **very helpful**, please share your opinion and thoughts! If you have any questions, join the [`#graphql-boilerplate`](https://graphcool.slack.com/messages/graphql-boilerplate) channel on our [Slack](https://graphcool.slack.com/).
1+
<h1 align="center"><strong>Boilerplate for a Basic Fullstack GraphQL App with Vue</strong></h1>
2+
3+
<br />
4+
5+
![](https://imgur.com/ousyQaC.png)
6+
7+
<div align="center"><strong>🚀 Bootstrap your fullstack GraphQL app within seconds</strong></div>
8+
<div align="center">Basic starter kit for a fullstack GraphQL app with Vue and Node.js - based on best practices from the GraphQL community.</div>
9+
10+
## Features
11+
12+
- **Scalable GraphQL server:** The server uses [`graphql-yoga`](https://github.com/prisma/graphql-yoga) which is based on Apollo Server & Express
13+
- **Pre-configured Apollo Client:** The project comes with a preconfigured setup for Apollo Client
14+
- **GraphQL database:** Includes GraphQL database binding to [Prisma](https://www.prismagraphql.com) (running on MySQL)
15+
- **Tooling**: Out-of-the-box support for [GraphQL Playground](https://github.com/prisma/graphql-playground) & [query performance tracing](https://github.com/apollographql/apollo-tracing)
16+
- **Extensible**: Simple and flexible [data model](./database/datamodel.graphql) – easy to adjust and extend
17+
- **No configuration overhead**: Preconfigured [`graphql-config`](https://github.com/prisma/graphql-config) setup
18+
19+
20+
## Requirements
21+
22+
You need to have the [GraphQL CLI](https://github.com/graphql-cli/graphql-cli) installed to bootstrap your GraphQL server using `graphql create`:
23+
24+
```sh
25+
npm install -g graphql-cli
26+
```
27+
28+
## Getting started
29+
30+
```sh
31+
# 1. Bootstrap GraphQL server in directory `my-app`, based on `vue-fullstack-basic` boilerplate
32+
graphql create my-app --boilerplate vue-fullstack-basic
33+
34+
# 2. When prompted, deploy the Prisma service to a _public cluster_
35+
36+
# 3. Navigate into the `server` directory of the new project
37+
cd my-app/server
38+
39+
# 4. Start the server
40+
yarn dev # runs server on http://localhost:4000, and opens GraphQL PLayground
41+
42+
# 5. Open a new tab in the terminal and navigate back into my-app;
43+
# then run the app
44+
cd ..
45+
yarn start
46+
```
47+
48+
## Documentation
49+
50+
### Commands
51+
52+
* `yarn start` starts GraphQL server on `http://localhost:4000`
53+
* `yarn dev` starts GraphQL server on `http://localhost:4000` _and_ opens GraphQL Playground
54+
* `yarn playground` opens the GraphQL Playground for the `projects` from [`.graphqlconfig.yml`](./.graphqlconfig.yml)
55+
* `yarn prisma <subcommand>` gives access to local version of Prisma CLI (e.g. `yarn prisma deploy`)
56+
57+
> **Note**: We recommend that you're using `yarn dev` during development as it will give you access to the GraphQL API or your server (defined by the [application schema](./src/schema.graphql)) as well as to the Prisma API directly (defined by the [Prisma database schema](./generated/prisma.graphql)). If you're starting the server with `yarn start`, you'll only be able to access the API of the application schema.
58+
59+
### Server structure
60+
61+
![](https://imgur.com/95faUsa.png)
62+
63+
| File name 　　　　　　　　　　　　　　| Description 　　　　　　　　<br><br>|
64+
| :-- | :-- |
65+
| `├── .graphqlconfig.yml` | Configuration file based on [`graphql-config`](https://github.com/prisma/graphql-config) (e.g. used by GraphQL Playground).|
66+
| `└── database ` (_directory_) | _Contains all files that are related to the Prisma database service_ |\
67+
| `　　├── prisma.yml` | The root configuration file for your Prisma database service ([docs](https://www.prismagraphql.com/docs/reference/prisma.yml/overview-and-example-foatho8aip)) |
68+
| `　　└── datamodel.graphql` | Defines your data model (written in [GraphQL SDL](https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51)) |
69+
| `└── src ` (_directory_) | _Contains the source files for your GraphQL server_ |
70+
| `　　├── index.js` | The entry point for your GraphQL server |
71+
| `　　├── schema.graphql` | The **application schema** defining the API exposed to client applications |
72+
| `　　└── generated` (_directory_) | _Contains generated files_ |
73+
| `　　　　└── prisma.grapghql` | The **Prisma database schema** defining the Prisma GraphQL API |
74+
75+
## Contributing
76+
77+
The GraphQL boilerplates are maintained by the GraphQL community, with official support from the [Apollo](https://dev-blog.apollodata.com) & [Graphcool](https://blog.graph.cool/) teams.
78+
79+
Your feedback is **very helpful**, please share your opinion and thoughts! If you have any questions or want to contribute yourself, join the [`#graphql-boilerplate`](https://graphcool.slack.com/messages/graphql-boilerplate) channel on our [Slack](https://graphcool.slack.com/).

‎basic/instagram.schema

-7
This file was deleted.

0 commit comments

Comments
 (0)