What is currently the best way to use Apollo GraphQL with the ORM?

[rbartholomay]

Hi there,

I think the ORM is great way to use data inside vuejs/Pinia! I try this and it runs fine in my case.
But I need to use GraphQL for the data. Any hint what is currently the best way to use GraphQL with the models?

Thanks!

[CodeDredd]

Hey :),

the best way to use any api with pinia-orm is to use the repository. I am still working on the examples and cookbook so that such questions are clear.
So normally you would have a UserModel and UserRepository. In the repository you then initilize through the construct the api client.

Ihaven't tested the code below, but thats how i would do it now. So you have something like this:

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

// Create the apollo client
export const useApolloClient = () => { 

const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3020/graphql',
})

// Cache implementation
const cache = new InMemoryCache()

return new ApolloClient({
  link: httpLink,
  cache,
}) 
}

import { useApolloClient } from `~/composoables/useApolloClient`
import { provideApolloClient, useQuery } from "@vue/apollo-composable";
import gql from 'graphql-tag'

export default class UserRepository extends BaseRepository<User> {
use = User;
  
api;

constructor(database: Database, pinia?: Pinia) {
  super(database, pinia);
  this.api = useApolloClient();
  provideApolloClient(this.api);
}

graphQL () {
   return {
      async fetchAll() {
         const { result } = useQuery(...);
         this.query().save(result);
       }
    }
  }      
}

in the file then:

const userRepo = useRepo(UserRepository);
userRepo.graphQL.fetchAll()

[rbartholomay]

Nice!!! I will try this!

Thanks...