leveluptuts / gquery Goto Github PK

With version 0.5.0 from npm I get the following error on npm run dev or npm run build:

error when starting dev server:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './codegen' is not defined by "exports" in <project-dir>/node_modules/@leveluptuts/g-query/package.json imported from <project-dir>/vite.config.js.timestamp-1659433708313.mjs
    at new NodeError (node:internal/errors:387:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:439:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:718:3)
    at packageResolve (node:internal/modules/esm/resolve:892:14)
    at moduleResolve (node:internal/modules/esm/resolve:958:20)
    at defaultResolve (node:internal/modules/esm/resolve:1173:11)
    at nextResolve (node:internal/modules/esm/loader:173:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)

Version 0.2.3 was working fine.
Is there anything wrong with the new release or are configuration changes required to make it work?

This is meant to be a starting point for discussion. This might not be something that many people need but in my case it would be helpful. I have a few things I like to do to shape the output of Codegen and I am restricted from doing so with the current implementation.

Background

Graphql-Codegen already allows for numerous configs right out of the box, especially for Typescript. Most of the options available are designed to shape the TS output to better suit specific needs. This is done through settings in the config.yml file in the project that is using codegen. refer to official codegen docs for further info.

Possible imlpementation

In reading through the source code for codegen/plugin.ts it appears that an optional property on the arugument object for levelupViteCodegen could be used as a config object and could pass configs through to the generator. A key / value object could be provided if required with the settings desired for the output. This config object could then be spread into the 'config' or 'presetConfig' sections of the call to generate. I'm not sure if it's that simple yet so I might experiment this weekend and see if I can get it working.

Considerations

By passing configurations through, it might be possible to overwrite something that the base gQuery functionality depends on, thereby making the package useless until the config is fixed. This could also cause bugs that are very hard to chase down. This will be hard to mitigate without further testing. A possible solution would be to identify settings that should be left alone, and then programming a filter to strip those settings from the config option before passing it along to generate. Doing so would then require clear documentation on what settings are ineffective and why, so people that try to use them aren't confused and frustrated.

Typing of the inputs to levelupViteCodegen with the added config would helpful in guiding people through what can and can't be changed. @Joehoel has a PR in here that gets this started, and merging the PR should go first so it can be built on.

Lastly, does anyone else want / need this, or is it just me?

.dump() to delete cache
.dump(['queryName'])

When adding the gQueryCodegen plugin to the Svelte config it takes an out key in the options object, but the docs site incorrectly shows it as needing an output key.
docs/src/docs.md has already been updated, it just appears that the docs site hasn't been rebuilt since then.

getQueryName to ${prefix}QueryName

pnpm install --save @leveluptuts/g-query graphql-tag
Already up-to-date
Progress: resolved 665, reused 649, downloaded 0, added 0, done
 WARN  Issues with peer dependencies found
.
└─┬ @leveluptuts/g-query
  └─┬ @graphql-codegen/import-types-preset
    └─┬ @graphql-codegen/visitor-plugin-common
      └─┬ @graphql-tools/relay-operation-optimizer
        └─┬ relay-compiler
          └── ✕ unmet peer graphql@^15.0.0: found 16.2.0

Thanks for the work!

I work on a prototype using Hasura as GraphQL backend and gQuery as client. The setup was running fine until I added authentication. Now "Load GraphQL schemas" is failing with "Could not obtain introspection result".
The introspection query is working though, if using something like Insomnia. I put a mitmproxy in between an discovered, that the request bodies differ. The request sent via Insomnia is wrapped by {"query":"...","operationName":"IntrospectionQuery"} and the one from gQuery by {"query":"..."}. The first one is working (without any credentials) and the latter is not.

I'm not sure whether this is a problem of gQuery or not.

Damn, maybe this is just a layer 8 problem an Insomnia is actually caching headers which were sent before.
By the way, how could I set headers for GFetch? Seems like they cannot be set via fetchOptions.

So, I have a usecase where I load multiple components on my site and I had a query for each of them, but soon I realised that even though sveltekit caches the responses, the http requests were still being made and the client had to wait for like 7-8 requests upon each page navigation.

I then merged most of the queries and now only 2 requests happen on each route (1 for the components and 1 for the page content) and things are a lot better. What I noticed though on my backend is that it supports batch queries and also provides a link on apollo's documentation on how it is implemented: https://www.wpgraphql.com/docs/wpgraphql-vs-wp-rest-api/#batch-queries

As I said, 2 requests per route are fine by me and I know this is a small project and chances of implementing any new features are slim, but here it is :D

P.S. Thanks for this lib, it's actually the most painless graphql client anyone can use with sveltekit atm.
P.S.2. Just editing gFetch to support multiple queries won't cut it I'm afraid as I am fetching the components query in my main __layout, since they are common to most routes.

I'm having this issue on my .svelte files:

Error in svelte.config.js

SyntaxError: Named export 'GraphQLBoolean' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

When trying to run the example, I ran into a snag. First I had this error config.kit.target is no longer required, and should be removed That was a quick and easy fix, just remove target: '#svelte', on line 11 of svelte.config.js.

Now I am seeing
`✘ [ERROR] Could not resolve "@leveluptuts/svelte-toy/Toy.svelte"

local-script:/Volumes/Storage/Code/Web/gQuery/example/src/lib/DevTools.svelte:9:7:
  9 │ import '@leveluptuts/svelte-toy/Toy.svelte'
    ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

and I do not know how to solve it.

I'm relly excited for this new project.

I'm using https://github.com/FormidableLabs/urql currently and the svelte integration is still not perfect (they are React developers).

I'm wondering what I can miss switching to this library: I'll try in the next days.

First, two questions:

1. Can we have a normalized cache (like https://formidable.com/open-source/urql/docs/graphcache/)? I think is not strictly needed for normal apps (they have also the https://formidable.com/open-source/urql/docs/basics/document-caching/ simple cache in fact).

2. Can we persist cache in browser (localstorage or indexeddb)? I think the normalized cache is useful here because we can save using ID and Typename.

Thanks again for your work!

I know this is a stretch and may be way out of scope for this library (which is awesome btw!), but using @urql/core could be a great way to give this library a huge leg up.

The URQL team have done a great job at making a framework agnostic GraphQL client, that supports things like subscriptions and caching and other crazy stuff, and taking it and using it as a backbone for this library could be a match made in heaven. Plus it could reduce the amount of work to do that kind of stuff A LOT!

What are peoples thoughts on this?

Some quick points

• I know there is already a Svelte package for URQL, but it isn't the best with Svelte Kit and requires a lot of wacky stuff to get working with SSR and CSR at the same time.
• URQL uses Wonka as its backbone, which can be a bit of a learning curve. However its api is super powerful, and has built in subscription support, which means making stores an absolute breeze

In reading through the docs at the website, I noticed that the codegen is generating .ts files. I chose not to use TypeScript when setting up my SvelteKit repo. Will this package still work?

e.g. after mutation, is there a way to invalidate and trigger a refetch for the underlying data, (e.g. profile picture under user object changes, so refetch the user query again)

Some big questions like...
query name coming in from a string. Would be better to have that auto determined from the .graphql file itself.

GQuery works beautifully 💎 when doing a fresh load of a page, but I run into a CORS policy issue navigating between routes.

I'm fetching my posts from Hashnode. If I click a SvelteKit link to a different route, I get the following CSP Error:

[Report Only] Refused to connect to 'https://api.hashnode.com/' because it violates the following Content Security Policy directive: "connect-src 'self' ws://localhost:*".

Access to fetch at 'https://api.hashnode.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

The script tags of my index.svelte:

<script context="module">
  import { getAllPosts } from './AllPosts.gq';

  export async function load({ fetch }) {
    await getAllPosts({
      variables: {
        username: 'chrisellis',
      },
      fetch,
    });
    return {};
  }
</script>

<script>
  import { allPosts } from './AllPosts.gq';

  let { posts } = $allPosts.user.publication;
</script>

Open to any suggestions! 👍

Rn there is confusion in gfetch as to when fetch is needed and when it's not. fetch is not required in the client side calls, but IS for server side calls, but also sometimes fails for client side calls if global is not passed in. That's all weird.

Hi,

Unfortunatedly its not working for me in Windows. Here is my configuration

gQueryCodegen({
	schema: `http://localhost:7000/graphql`, 
	out: 'src/lib/gql', 
	gPath: '$lib/config/g', 
	debug: false
}),

Export functions that don't update the object cache and just return data.

Make repo a Svelte Kit app with packages dir.

I'm following the docs, working on building an ecomm starter with Sanity and gQuery. I'm getting the following error in a new SK project running v1.0.0-next.241.

> Cannot find module '/Users/blackcatstudio1/code/kit-gq-sanity/node_modules/@leveluptuts/g-query/dist/gFetch' imported from /Users/blackcatstudio1/code/kit-gq-sanity/node_modules/@leveluptuts/g-query/dist/index.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:394:11)
    at moduleResolve (node:internal/modules/esm/resolve:915:10)
    at defaultResolve (node:internal/modules/esm/resolve:1005:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36)

I've deleted node_modules, lock files, re-installed and removed gQuery completely to start over from the beginning - still getting this error.

Other important info

OS: Big Sur 11.6
Node: 17.3.1
npm: 8.3.0

The code can be found here

Thanks for any help! I'm sure I'll figure it out eventually, I love your approach but am struggling to get started.

the error

npm run dev

> [email protected] dev /Users/daniel/code/newsvelte
> svelte-kit dev

(node:86887) UnhandledPromiseRejectionWarning: file:///Users/daniel/code/newsvelte/node_modules/@graphql-tools/utils/index.mjs:1
import { parse, GraphQLError, isNonNullType, Kind, valueFromAST, print, isObjectType, isListType, isSpecifiedDirective, astFromValue, isSpecifiedScalarType, isIntrospectionType, isInterfaceType, isUnionType, isInputObjectType, isEnumType, isScalarType, GraphQLDeprecatedDirective, specifiedRules, concatAST, validate, versionInfo, buildClientSchema, visit, TokenKind, Source, isTypeSystemDefinitionNode, getNamedType, GraphQLString, GraphQLNonNull, GraphQLList, GraphQLID, GraphQLBoolean, GraphQLFloat, GraphQLInt, GraphQLObjectType, GraphQLInterfaceType, GraphQLInputObjectType, GraphQLDirective, GraphQLUnionType, GraphQLEnumType, GraphQLScalarType, isNamedType, getNullableType, isLeafType, GraphQLSchema, isDirective, isCompositeType, doTypesOverlap, getOperationAST, getDirectiveValues, GraphQLSkipDirective, GraphQLIncludeDirective, typeFromAST, isAbstractType, getOperationRootType, TypeNameMetaFieldDef, buildASTSchema } from 'graphql';
^^^^
SyntaxError: Named export 'Kind' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const { parse, GraphQLError, isNonNullType, Kind, valueFromAST, print, isObjectType, isListType, isSpecifiedDirective, astFromValue, isSpecifiedScalarType, isIntrospectionType, isInterfaceType, isUnionType, isInputObjectType, isEnumType, isScalarType, GraphQLDeprecatedDirective, specifiedRules, concatAST, validate, versionInfo, buildClientSchema, visit, TokenKind, Source, isTypeSystemDefinitionNode, getNamedType, GraphQLString, GraphQLNonNull, GraphQLList, GraphQLID, GraphQLBoolean, GraphQLFloat, GraphQLInt, GraphQLObjectType, GraphQLInterfaceType, GraphQLInputObjectType, GraphQLDirective, GraphQLUnionType, GraphQLEnumType, GraphQLScalarType, isNamedType, getNullableType, isLeafType, GraphQLSchema, isDirective, isCompositeType, doTypesOverlap, getOperationAST, getDirectiveValues, GraphQLSkipDirective, GraphQLIncludeDirective, typeFromAST, isAbstractType, getOperationRootType, TypeNameMetaFieldDef, buildASTSchema } = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:104:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:149:5)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async load_config (file:///Users/daniel/code/newsvelte/node_modules/@sveltejs/kit/dist/cli.js:849:17)
    at async file:///Users/daniel/code/newsvelte/node_modules/@sveltejs/kit/dist/cli.js:948:19

(Use `node --trace-warnings ...` to show where the warning was created)
(node:86887) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:86887) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

What I've tried:

• a couple different projects
• I'm on an m1 but I don't think that's it?
• svelte-kiters are aware of this class of issue: sveltejs/kit#928
• graphql had a similar looking issue: graphql/graphql-js#2721

I believe the issue is that while NodeJS treats your index.js as an ES module, it doesn't resolve the graphql import to its "module": "index.mjs" file. I'm searching NodeJS docs regarding this behavior, but cannot find it any mention that it would respect the module property of the package.json of the imported (third-party) module.

The module build file will work when you bundle your index.js with tools like webpack, as they respect the module field of GraphQL's package.json, and will include index.mjs instead of its CommonJS module.

But graphql-tools IS loading the mjs:

(node:86887) UnhandledPromiseRejectionWarning: file:///Users/daniel/code/newsvelte/node_modules/@graphql-tools/utils/index.mjs:1,...

Latest npm version published 8 months ago, PRs not being merged.

I tried to follow the instructions on https://gquery.leveluptutorials.com/. They look like a no brainer, but didn't work, so I am going to assume this is a dead repo. Sad, it looked so promising... 😢

import gQueryCodegen from '@leveluptuts/g-query/codegen'

Cannot find module '@leveluptuts/g-query/codegen' or its corresponding type declarations

Is this abandoned?

https://www.graphql-code-generator.com/docs/presets/near-operation-file