surfql/apollo-playgrounds

Get familiar with the visualization and autocomplete features offered by the SurfQL extension.

SurfQL + Apollo Playgrounds

Get familiar with the visualization and autocomplete features offered by the SurfQL VS Code extension.

Basic Setup

1. Clone the files to your machine in your preferred way (Git tutorial).
2. Open VS Code to the cloned project directory.
3. Navigate to client/src/query.tsx to view the GraphQL query within query.tsx.
4. In your VS Code's activity bar click on the SurfQL logo and then "View Schemas".
5. In the schema visualizer, turn on track mode.
6. As you modify the query, the visualizer should follow your updates.

Server Setup

1. CD into the sever directory.
2. In the terminal run npm install -g typescript to globally install typescript if this hasn't been done before.
3. In the terminal run npm i to install the rest of the packages.
4. In the terminal run npm start to start the Apollo GraphQL server.

Client Setup

1. CD into the client directory.
2. In the terminal run npm install -g typescript to globally install typescript if this hasn't been done before.
3. In the terminal run npm i to install the rest of the packages.
4. In the terminal run npm start to serve your React.js website to yourself via a webpack dev server.

Technologies Used

• GraphQL
• Node.js
• TypeScript
• Apollo (client/server)
• React.js
• Weback