Hasura graphql?

[cliqqz]

Hey!

I find solidjs pretty interesting. Currently onto svelte since the on vdom approach. I noticed solidjs feels exactly like react except for the vdom part. Is there any reference implementation on hasura graphql? I did not find anything regarding this (solid is pretty new though). Any ideas about how to get it working? Would look forward to it!

regards

[ryansolid]

Oh ok, I haven't heard of Hasura GraphQL, but I see it just uses the GraphQL client of your choice. I've use Solid with Apollo but I can't say that the approach is as polished as Apollo React. Generally I just wrap an Apollo Client in a Provider and then use client.watchQuery or client.mutate.

So you might do something like:

// store.jsx
import { createContext, useContext } from 'solid-js';

const ApolloContext = createContext({});

export function ApolloProvider(props) {
  const client = new ApolloClient(/* all the config */);
  return <ApolloContext.Provider value={client}>{props.children}</ApolloContext.Provider>
}

export function useApollo() { return useContext(ApolloContext); }

// A component somewhere else:
import { createState, reconcile } from 'solid-js'
import { useApollo } from './store.jsx'

export default function UserComponent(props) {
  const [state, setState] = createState({});
  const client = useApollo();
  client.watchQuery({query: gql`your query ...`})
    .subscribe(({data}) => {
      setState('user', reconcile(data.user));
    });
  return <Show when={state.user}>
    <h1>Hi {state.user.firstName}</h1>
  </Show>
}

That being said there are lots of ways to use this. This example didn't use Suspense and is based on watching an observable. Which has the benefit of keeping things up to date even if data is updated elsewhere. This isn't the only way to handle this. I'd obviously like to eventually have a better wrapper. But for now it's just using the Apollo Client API: https://www.apollographql.com/docs/react/api/apollo-client

So unfortunately I don't have a great answer for you in terms of an easy to use library. But there should be no issue using Apollo client directly. Hopefully that helps. But I understand if it isn't the best answer.

[aguilera51284]

this could work with wouter????

[ryansolid]

Unfortunately not. While we could build something similar. Hooks fundamentally work different than Solid's computations. They look similar but that's where the similarity ends. Hooks VDOM libraries render full components over and over and only run the hooks when something changes, basically whitelisting changes. Solid only renders Components once and it's the Computations(Hooks) that run multiple times. It means in practice the approaches are quite transferable. There are places where each need more wrappers (like useCallback etc) and it doesn't really work the same.

[thednp]

It's 2022, any update on this?

[ajcwebdev]

There's a blog post by @nisargjoshi95 called Over-Engineering a Todo App: Postgres, GraphQL, Python, SolidJS that uses Hasura. There's also a lot more GraphQL resources in general including:

• @solid-primitives/graphql
• tqwewe/solid-urql
• jherr/solid-graphql-code
• sophiabrandt/solid-heroes
• merged-js/solid-urql
• merged-js/solid-apollo
• zentered/fastify-dx-solidjs-example

[nisuxyz]

Thanks for sharing @ajcwebdev! I just uploaded the code for that blog series in a repo here - while I haven't finished the part 3 article yet which starts to get into the frontend details, I have completed a good bit of the code which you can take a look at. In short, interacting with hasura is pretty much like interacting with any other graphql service. I'm using solid-urql and haven't noticed any issues so far.

[frederikhors]

Any news for 2023? @ajcwebdev?

[ajcwebdev]

Thanks for the ping but unfortunately since I've moved on from my role at StepZen I can't say I'm particularly plugged in anymore to the GraphQL zeitgeist. I'd recommend trying to get in touch with the Hasura DevRel team for updates.