Inline-queries in non-route components doesn't work

[yasserlens]

Describe the bug

I'm trying to follow the example below:
https://www.houdinigraphql.com/guides/working-with-graphql#inline-queries

I get the following error

graphql template was invoked at runtime. This should never happen and usually means that your project isn't properly configured.

Please make sure you have the appropriate plugin/preprocessor enabled. For more information, visit this link: https://houdinigraphql.com/guides/setting-up-your-project

The setup is something like this:
+layout.svelte

<script>
import CartComponent from '$lib/cart.svelte';
</script>

<CartComponent /> 

$lib/cart.svelte

<script>
// Here I have code very similar to what you show in the example:
// https://www.houdinigraphql.com/guides/working-with-graphql#inline-queries
</script>

{$myQuery.data}

This, plus a bunch of other reported errors (e.g. manual loading issues (see this discussion)) earlier makes houdini a real pain to use :-(
I'm spending hours on what should take minutes due to very odd errors with "magic" handlers that work behind the scenes with very little context/exposure into what's going on.

Relevant package versions
"houdini": "^0.16.5",
"svelte": "^3.50.1",
"@sveltejs/kit": "^1.0.0-next.476",

Note: the GraphQL API I'm using has some issues, which results in the following error when I generate the schema:

⚠️  Your project defines a Node interface but it does not conform to the Global Identification Spec.

If you are trying to provide the Node interface and its field, they must look like the following:

interface Node {
        id: ID!
}

extend type Query {
        node(id: ID!): Node
}

Severity

serious, but I can work around it

Steps to Reproduce the Bug

Follow the example below
https://www.houdinigraphql.com/guides/working-with-graphql#inline-queries

Reproduction

No response

[AlecAivazis]

Sorry to hear you are running into another issue - is this repo pushed up somewhere I can take a look?

For context, we have a non-route component query in the integration tests that's working as expected so I suspect there is something wrong with your configuration values. can you share your config file?

[yasserlens]

Thanks for getting back to me Alec - the repo isn't publicly available (it's an ecommerce website) but if the issue wasn't the config file I'll work on having an MVP representing the issue public so I could share it.

Please find the config below

/** @type {import('houdini').ConfigFile} */
const config = {
    "schemaPath": "./schema.graphql",
    "client": "./src/lib/graphql/client.ts",
    "include": "src/**/*.{svelte,gql,graphql}",
    "apiUrl": "http://localhost:3000/shop-api",
    "defaultCachePolicy": "CacheAndNetwork",
    "scalars": {
        // the name of the scalar we are configuring
        DateTime: {
          // the corresponding typescript type
          type: 'Date',
          // turn the api's response into that type
          unmarshal(val) {
            return new Date(val)
          },
          // turn the value into something the API can use
          marshal(date) {
            return date.getTime()
          }
        },
        JSON: {
          // the corresponding typescript type
          type: 'unknown',
          // turn the api's response into that type
          unmarshal(val) {
            return val;
          },
          // turn the value into something the API can use
          marshal(json) {
            return json.toString();
          }
        }
    }
}

export default config

Let me know if this doesn't help and you need more details please. Thanks again!

[AlecAivazis]

Thanks for that @yasserlens! Mind also sharing the relevant bits of your vite.config.js?

edit: probably worth mentioning that you will need to have .js in your include value if you want to use any kind of load generation in the future

[yasserlens]

Hey Alec

Thanks - are you saying that "load_" functions aren't correctly generated due to not having ".js" in the include string?
I just included JS as follows:

"include": "src/**/*.{svelte,gql,graphql,js}",

Please find vite.config.js below:

import { sveltekit } from '@sveltejs/kit/vite';
import houdini from 'houdini/vite'

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [
		sveltekit(), houdini()
	],
};

export default config;

And in case it was needed, client.ts is below

import type { RequestHandlerArgs } from '$houdini';
import { HoudiniClient } from '$houdini/runtime';
import { dev, browser } from '$app/environment';
import { env } from '$env/dynamic/public';

const AUTH_TOKEN_KEY = 'auth_token'

async function fetchQuery({
  fetch,
  text = '',
  variables = {},
  // session,
  metadata
}: RequestHandlerArgs) {
  const url = dev ? env.PUBLIC_DEV_GRAPHQL_API : env.PUBLIC_GRAPHQL_API;
  const headers: HeadersInit = {};
  headers['Content-Type'] = 'application/json';

  if (metadata?.token) {
    headers['some_token_key'] = metadata.token;
  }

  if (browser) {
    const token = localStorage.getItem(AUTH_TOKEN_KEY);
    if (token) {
      headers['Authorization'] = `Bearer ${token}`;
    }
  }

  const result = await fetch(url!, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      query: text,
      variables,
    }),
  });

  if (browser) {
    const authToken = result.headers.get(AUTH_TOKEN_KEY);
    if (authToken) {
      localStorage.setItem(AUTH_TOKEN_KEY, authToken);
    }
  }

  return await result.json();
}

export default new HoudiniClient(fetchQuery);

[AlecAivazis]

Thanks - are you saying that "load_" functions aren't correctly generated due to not having ".js" in the include string?
I just included JS as follows:

No, sorry my original message wasn't clear. It only really matters if you use generated loaders (houdini_load or +page.gql). If all you use is load_ functions then you don't need the extra extension. That being said, what you have there is the default value so you can just delete the config value if you want. While you're at it, your value for schemaPath is also the default.

Please find vite.config.js below:

Oh! I think this is the problem. the houdini plugin needs to come before the sveltekit one so we can transform things before kit gets to it.

[AlecAivazis]

@yasserlens were you able to check if that was the issue?

[AlecAivazis]

I'm going to close this since it's gone stale. Let me know if you're still running into problems and I can reopen it

[xmlking]

@yasserlens I am facing same problem while I am trying to play with fragments. it seams only happen on dev server.
build/server works fine.
can you please share if you find the root cause and workaround ?

[yasserlens]

@xmlking I haven't found a solution - so I avoided the use case. Also, Houdini had several major updates after that which I did not make - so not sure if this was solved by versions newer than the one I have.

[xmlking]

@xmlking I haven't found a solution - so I avoided the use case. Also, Houdini had several major updates after that which I did not make - so not sure if this was solved by versions newer than the one I have.

thanks for quick replay @yasserlens
I have latest versions but trying very simple example https://github.com/xmlking/spectacular/tree/main/apps/console/src/routes/(app)/rules

I guess I am missing some config needed for fragments. will reach out @AlecAivazis on discord.

[yasserlens]

If you can update this when you know more that'll be great - for other people to learn from what happened.