Add env: prefix to chema pull headers (#495)

* clean up config

* finish updating example

* environment variables need env: prefix

* added changeset

* add super calls to all store typedefs

.changeset/lemon-chefs-smash.md

@@ -0,0 +1,5 @@
+---
+'houdini': patch
+---
+
+schemaPollHeaders requires env: prefix to reference environment variable

example/api.mjs

@@ -1,8 +1,8 @@
 import { createServer } from '@graphql-yoga/node'
 import { useServer } from 'graphql-ws/lib/use/ws'
-import ws from 'ws'
+import { WebSocketServer } from 'ws'
+
 import { resolvers, typeDefs } from './schema/index.mjs'
-const WebSocketServer = ws.Server
 
 async function main() {
 	const yogaApp = createServer({
@@ -41,7 +41,7 @@ subscription SubToNewItem {
 			text
 		}
 	}
-}			
+}
 			`,
 		},
 	})

example/houdini.config.js

@@ -1,9 +1,6 @@
 /** @type {import('houdini').ConfigFile} */
 const config = {
-	schemaPath: './schema/schema.gql',
-	sourceGlob: 'src/**/*.{svelte,gql,graphql}',
-	framework: 'kit',
-	module: 'esm',
+	client: './src/client.ts',
 	apiUrl: 'http://localhost:4000/graphql',
 	scalars: {
 		DateTime: {

example/package.json

@@ -1,29 +1,30 @@
 {
 	"name": "example-kit",
 	"version": "0.13.0",
+	"private": true,
 	"scripts": {
-		"prepare": "svelte-kit sync",
 		"generate": "houdini generate",
 		"web": "vite dev",
 		"api": "node api.mjs",
-		"dev": "npm run prepare && npm run generate && concurrently \"npm run web\" \"npm run api\" -n \"web,api\" -c \"green,magenta\"",
+		"dev": "concurrently \"npm run web\" \"npm run api\" -n \"web,api\" -c \"green,magenta\"",
 		"build": "vite build",
 		"start": "vite preview"
 	},
 	"devDependencies": {
+		"@graphql-yoga/node": "2.8.0",
 		"@kitql/vite-plugin-watch-and-run": "^0.4.0",
-		"@sveltejs/kit": "1.0.0-next.370",
+		"@sveltejs/kit": "1.0.0-next.435",
 		"concurrently": "^6.2.1",
 		"graphql": "15.5.0",
-		"houdini": "0.15.5",
+		"houdini": "workspace:^",
 		"svelte": "^3.38.2",
 		"svelte-preprocess": "^4.0.0",
 		"tslib": "^2.2.0",
 		"typescript": "^4.0.0",
-		"vite": "^2.9.14"
+		"vite": "^3.0.0",
+		"ws": "^8.8.1"
 	},
 	"dependencies": {
-		"@graphql-yoga/node": "2.8.0",
 		"graphql-relay": "0.8.0",
 		"graphql-tag": "2.12.6",
 		"graphql-ws": "5.8.2"

example/schema/schema.gql → example/schema.graphql

@@ -1,8 +1,3 @@
-directive @cacheControl(
-	maxAge: Int
-	scope: CacheControlScope
-) on FIELD_DEFINITION | INTERFACE | OBJECT
-
 input AddItemInput {
 	text: String!
 }
@@ -12,11 +7,6 @@ type AddItemOutput {
 	item: TodoItem
 }
 
-enum CacheControlScope {
-	PRIVATE
-	PUBLIC
-}
-
 """
 Date custom scalar type
 """
@@ -81,8 +71,3 @@ type UpdateItemOutput {
 	error: Error
 	item: TodoItem
 }
-
-"""
-The `Upload` scalar type represents a file upload.
-"""
-scalar Upload

example/src/client.ts

@@ -4,13 +4,7 @@ import { HoudiniClient } from '$houdini'
 import { createClient as createWSClient } from 'graphql-ws'
 
 // For Query & Mutation
-async function fetchQuery({
-	fetch,
-	text = '',
-	variables = {},
-	session,
-	metadata,
-}: RequestHandlerArgs) {
+async function fetchQuery({ fetch, text = '', variables = {} }: RequestHandlerArgs) {
 	const result = await fetch('http://localhost:4000/graphql', {
 		method: 'POST',
 		headers: {
@@ -28,10 +22,11 @@ async function fetchQuery({
 // For subscription (client only)
 let socketClient: SubscriptionHandler | null = null
 if (browser) {
+	// @ts-ignore
 	socketClient = createWSClient({
 		url: 'ws://localhost:4000/graphql',
 	})
 }
 
 // Export the Houdini client
-export const houdiniClient = new HoudiniClient(fetchQuery, socketClient)
+export default new HoudiniClient(fetchQuery, socketClient)

example/src/lib/ItemEntry.svelte

@@ -1,17 +1,8 @@
-<script lang="ts">
-	import {
-		fragment,
-		mutation,
-		graphql,
-		subscription,
-		type ItemEntry_item,
-		type CompleteItem,
-		type UncompleteItem,
-		type DeleteItem,
-	} from '$houdini'
+<script>
+	import { graphql, fragment } from '$houdini'
 
 	// the reference we're passed from our parents
-	export let item: ItemEntry_item
+	export let item
 
 	// get the information we need about the item
 	const data = fragment(
@@ -27,7 +18,7 @@
 	)
 
 	// create the functions we'll invoke to check, uncheck, and delete the item
-	const completeItem = mutation<CompleteItem>(graphql`
+	const completeItem = graphql`
 		mutation CompleteItem($id: ID!) {
 			checkItem(item: $id) {
 				item {
@@ -37,8 +28,8 @@
 				}
 			}
 		}
-	`)
-	const uncompleteItem = mutation<UncompleteItem>(graphql`
+	`
+	const uncompleteItem = graphql`
 		mutation UncompleteItem($id: ID!) {
 			uncheckItem(item: $id) {
 				item {
@@ -48,44 +39,40 @@
 				}
 			}
 		}
-	`)
-	const deleteItem = mutation<DeleteItem>(graphql`
+	`
+	const deleteItem = graphql`
 		mutation DeleteItem($id: ID!) {
 			deleteItem(item: $id) {
 				itemID @TodoItem_delete
 			}
 		}
-	`)
+	`
 
 	// make sure the todo items stay up to date
-	subscription(
-		graphql`
-			subscription ItemUpdate($id: ID!) {
-				itemUpdate(id: $id) {
-					item {
-						id
-						completed
-						text
-						createdAt
-					}
+	const itemUpdates = graphql`
+		subscription ItemUpdate($id: ID!) {
+			itemUpdate(id: $id) {
+				item {
+					id
+					completed
+					text
+					createdAt
 				}
 			}
-		`,
-		{
-			id: $data.id,
 		}
-	)
+	`
+	$: itemUpdates.listen({ id: $data.id })
 
 	async function handleClick() {
 		// if the item is already checked
 		if ($data.completed) {
 			// uncheck it
-			await uncompleteItem({ id: $data.id })
+			await uncompleteItem.mutate({ id: $data.id })
 		}
 		// the item is unchecked
 		else {
 			// check it
-			await completeItem({ id: $data.id })
+			await completeItem.mutate({ id: $data.id })
 		}
 	}
 </script>
@@ -105,7 +92,7 @@
 				{$data.createdAt.toLocaleDateString('en-US')}
 			</span>
 		</label>
-		<button class="destroy" on:click={() => deleteItem({ id: $data.id })} />
+		<button class="destroy" on:click={() => deleteItem.mutate({ id: $data.id })} />
 	</div>
 </li>
 

example/src/routes/+layout.js

@@ -0,0 +1,5 @@
+import { browser } from '$app/env'
+
+import houdiniClient from '../client'
+
+houdiniClient.init()

example/src/routes/__layout.svelte → example/src/routes/+layout.svelte

@@ -1,11 +1,3 @@
-<script context="module">
-	import { browser } from '$app/env'
-	import cache from '$houdini/runtime/cache'
-	import { houdiniClient } from '../client'
-
-	houdiniClient.init()
-</script>
-
 <svelte:head>
 	<title>Houdini • TodoMVC</title>
 	<link rel="stylesheet" href="//unpkg.com/todomvc-common/base.css" />

example/src/routes/+page.js

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit'
+
+export async function load() {
+	throw redirect(302, '/all')
+}

example/src/routes/+page.svelte

@@ -0,0 +1,3 @@
+<!--
+    redirect / to /all
+-->

example/src/routes/[filter].svelte → example/src/routes/[filter]/+page.svelte

@@ -1,32 +1,11 @@
-<script context="module" lang="ts">
-	export function AllItemsVariables({ params }) {
-		// if there is no filter assigned, dont enforce one in the query
-		if (!params.filter || params.filter === 'all') {
-			return {
-				completed: undefined,
-			}
-		}
-
-		// make sure we recognize the value
-		if (!['active', 'completed', 'all'].includes(params.filter)) {
-			return this.error(400, "filter must be one of 'active' or 'completed'")
-		}
-
-		return {
-			completed: params.filter === 'completed',
-		}
-	}
-</script>
-
 <script lang="ts">
 	import { page } from '$app/stores'
-	import type { AddItem, AllItems } from '$houdini'
-	import { graphql, mutation, paginatedQuery, subscription } from '$houdini'
+	import { graphql, type AddItemStore, type AllItemsStore, type NewItemStore } from '$houdini'
 	import ItemEntry from '$lib/ItemEntry.svelte'
 	import { derived } from 'svelte/store'
 
 	// load the items
-	const { data, pageInfo, loadNextPage } = paginatedQuery<AllItems>(graphql`
+	const items: AllItemsStore = graphql`
 		query AllItems($completed: Boolean) @cache(policy: CacheOrNetwork) {
 			filteredItems: items(completed: $completed, first: 2)
 				@paginate(name: "Filtered_Items") {
@@ -47,20 +26,20 @@
 				}
 			}
 		}
-	`)
+	`
 
 	// state and handler for the new item input
-	const addItem = mutation<AddItem>(graphql`
+	const addItem: AddItemStore = graphql`
 		mutation AddItem($input: AddItemInput!) {
 			addItem(input: $input) {
 				error {
 					message
 				}
 			}
 		}
-	`)
+	`
 
-	subscription(graphql`
+	const subscription: NewItemStore = graphql`
 		subscription NewItem {
 			newItem {
 				item {
@@ -69,10 +48,12 @@
 				}
 			}
 		}
-	`)
+	`
+
+	$: subscription.listen()
 
-	$: numberOfItems = $data?.allItems.edges.length || 0
-	$: itemsLeft = $data?.allItems.edges.filter(({ node: item }) => !item?.completed).length
+	$: numberOfItems = $items.data?.allItems.edges.length || 0
+	$: itemsLeft = $items.data?.allItems.edges.filter(({ node: item }) => !item?.completed).length
 
 	// figure out the current page
 	const currentPage = derived(page, ($page) => {
@@ -96,6 +77,7 @@
 	}
 </script>
 
+s
 <header class="header">
 	<a href="/">
 		<h1>todos</h1>

example/src/routes/[filter]/+page.ts

@@ -0,0 +1,17 @@
+export function AllItemsVariables({ params }) {
+	// if there is no filter assigned, dont enforce one in the query
+	if (!params.filter || params.filter === 'all') {
+		return {
+			completed: undefined,
+		}
+	}
+
+	// make sure we recognize the value
+	if (!['active', 'completed', 'all'].includes(params.filter)) {
+		return this.error(400, "filter must be one of 'active' or 'completed'")
+	}
+
+	return {
+		completed: params.filter === 'completed',
+	}
+}