Urql svelte does not add query parameter properly

Question

I get this error when initializing a query with urql

[GraphqlQL] must provide query

I checked the payload in the network tab and it looks like urql removed the query keyword from the request payload this is how it looks like in the network tab:

query:  {\n  categories {\n    name\n    id\n    __typename\n  }\n}

This is my query in the svelte file, it's copied from the documentation exactly

const categories = operationStore(`
      query {
        categories{
          name
          id
        }
      }
      `)

this is the payload generated in graphiql query: "query{\n categories{\n id\n name\n }\n}"

any help would be greatly appreciated thanks in advance

Answer 1

You need to preprocess queries using the gql facility provided by urql:

import { gql } from '@urql/svelte';

const categories = operationStore(gql`
  query {
    categories {
      name
      id
    }
  }
`);

If your queries start becoming more complex, or if you start handling multiple different queries, I recommend putting them in their own separate file(s) ($lib/queries.js is as good a place as any), for example in your case:

// $lib/queries.js
import { gql } from '@urql/svelte';

export const GET_CATEGORIES = gql`
  query {
    categories {
      name
      id
    }
  }
`;

// in your component:
import { GET_CATEGORIES } from '$lib/queries';

const categories = operationStore(GET_CATEGORIES);