Question on Using Queries with Parameters in Houdini
I'm currently working on a SvelteKit project using Houdini for GraphQL integration. I have defined a query in my +page.gql
file for logging in a user, which requires two parameters: usernameOremail
and password
. However, I'm encountering an issue when trying to execute this query from my Svelte component.
Error Message
When I attempt to call the fetch
method on my LoginUser
store, I receive the following error:
TypeError: Cannot read properties of undefined (reading 'fetch') at login (/Users/username/Documents/projects/frontend/src/routes/(register)/login/+page.svelte:12:25) at eval (/Users/username/Documents/projects/frontend/src/routes/(register)/login/+page.svelte:15:2) ...
GraphQL Query Definition
Here's the query I've defined in +page.gql
:
query LoginUser($usernameOremail: String!, $password: String!) { loginUser(input: { usernameOremail: $usernameOremail, password: $password }) { token expiresAt }}
Svelte Component Code
In my +page.svelte
, I have the following code:
<script lang="ts"> import type { PageData } from "./$houdini"; export let data: PageData; // Access the LoginUser store from the data $: ({ LoginUser } = data); // Function to execute the login query with parameters async function login(usernameOremail: string, password: string) { try { // Call the LoginUser store with the input values const result = await LoginUser.fetch({ variables: { usernameOremail, password } }); console.log(result.data); // Log the result } catch (error) { console.error("Error executing LoginUser query:", error); } } // Example usage login("my_username", "yourpassword");</script>
Specific Question
- What could be causing the
undefined (reading 'fetch')
error when I try to callLoginUser.fetch()
, although I see definition on VS code? (=> see. the picture above.) - How to use client-side Query with parameter(s). in Houdini?
Any guidance or troubleshooting tips would be greatly appreciated!