Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible usage of hooks with useQuery / useSubscription #192

Open
samdenty opened this issue Apr 11, 2021 · 3 comments
Open

Possible usage of hooks with useQuery / useSubscription #192

samdenty opened this issue Apr 11, 2021 · 3 comments

Comments

@samdenty
Copy link
Owner

samdenty commented Apr 11, 2021

We could enable usage of the hooks logic, without importing useQuery or useSubscription.

Hooks make the code messier:

const { posts } = useQuery()

<div>
// It's ambiguous what 'posts' is relating to, especially if we're calling it with arguments
{posts({ limit: 1 }).map()}
// It's super-clear when you don't have the hook
{query.posts({ limit: 1 })}

// if you want to use a field with the same arguments multiple times
// we need to store it as a variable
const posts_ = posts({ limit: 1 })
// but the name conflicts with `const { posts } = useQuery()`

// so we'd be better of with doing
const query = useQuery()
const posts = query.posts({ limit: 1 })
{posts.map()}

// but then the hook is redundant, we could of just imported `query` from `../src/gqless`
</div>

It's possible to detect whether we're rendering inside a React Component by doing

try {
	var inComponent = true
	React.useState("")
} catch(e) {
	inComponent = false
}
console.log(inComponent)

As GQless is a proxy, we could easily do this when you do query.posts. This shouldn't be in the core though, so the core could expose an API:

// somewhere in the react binding
import { interceptRootProxy } from 'gqless'

interceptRootProxy((type: "subscription" | "query") => {
  // called when `query.XXX` is accessed
})

inside this API, we could perform all the hook logic we currently do inside useQuery / useSubscription.

useSubscription doesn't have any arguments to customize, so it could be removed.
useQuery has optional arguments, so we should make it require you to pass options

I think this should work, I'm curious to hear your thoughts

@natew
Copy link
Contributor

natew commented Apr 11, 2021

I agree on usage, in general moving away from destructuring on the hooks in docs and as a general good practice, like you said:

const query = useQuery()
query.posts()

The hookless thing looks a bit crazy to me, but perhaps Pablo doesn't see any big downsides.

@vicary
Copy link

vicary commented Apr 12, 2021

Does this issue means React users has to move away from the hook pattern?

@PabloSzx
Copy link
Contributor

PabloSzx commented Apr 12, 2021

Does this issue means React users has to move away from the hook pattern?

I don't think so


I don't agree with the proposal made here, there is component-aware stuff in the hooks, and non-suspense usage, which this pattern wouldn't allow at all

@samdenty If you want to make a separate branch implementing this logic as a proof of concept, feel free, but removing the hooks is 100% unlikely

@samdenty samdenty changed the title Removing useQuery / useSubscription Possible usage of hooks with useQuery / useSubscription Apr 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants