Hybrids: Query Factory
import { query, define, html } from '@apollo-elements/hybrids';
import { UsersQuery } from './Users.query.graphql.js';
define('users-list', {
users: query(UsersQuery),
render: ({ users }) => html`
<link rel="stylesheet" href="users-list.css">
<ol>${(users.data?.users??[]).map(x => html`<li data-id="${x.id}">${x.name}</li>`)}</ol>
`,
});
:host {
display: block;
}
import type { User } from './client';
import type { TypedDocumentNode } from '@apollo/client/core';
import { gql } from '@apollo/client/core';
export const UsersQuery: TypedDocumentNode<{ users: User[] }> = gql`
query UsersQuery {
users {
id
name
}
}
`;
<script type="module" src="client.js"></script>
<script type="module" src="users-list.js"></script>
<users-list></users-list>
import type { InMemoryCacheConfig, NormalizedCacheObject } from '@apollo/client/core';
import { SchemaLink } from '@apollo/client/link/schema';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { addMocksToSchema } from '@graphql-tools/mock';
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';
export interface User {
id: string;
name: string;
status?: 'DELETED';
};
const typeDefs = `
type User {
name: String
id: ID
}
type Query {
users: [User]
}
type Mutation {
addUser(name: String): User
removeUser(id: ID): User
}
`;
const USERS = [
{ id: 1, name: 'Neil' }
];
const randomDelay = () => new Promise(r => setTimeout(r, Math.random() * 500));
export const client = new ApolloClient({
cache: new InMemoryCache(),
link: new SchemaLink({
schema: makeExecutableSchema({
typeDefs,
resolvers: {
Query: {
users() {
return USERS.filter(x => x.status !== 'DELETED');
}
},
Mutation: {
async addUser(_, { name }) {
const user = { name, id: Math.max(...USERS.map(x => x.id)) + 1 };
USERS.push(user);
await randomDelay()
return user;
},
async removeUser(_, { id }) {
const user = USERS.find(x => x.id == parseInt(id));
user.status = 'DELETED';
await randomDelay();
return user;
}
}
}
}),
}),
});
window.__APOLLO_CLIENT__ = client;
query
Parameters
queryDocument
ComponentDocument<D> | null
The query document.
options
ApolloQueryControllerOptions<D, V>
Options to control the query.
All properties are optional
| Property | Type | Description |
|---|---|---|
| fetchPolicy | WatchQueryFetchPolicy |
The fetchPolicy for the query. |
| variables | Variables<D, V> |
Variables for the query. |
| noAutoSubscribe | boolean |
If true, the element will not begin querying data until you manually call subscribe |
| shouldSubscribe | (op?: Partial<Operation<D, V>) => boolean |
If true, the element will not begin querying data until you manually call subscribe |
| onData | (data: Data<D>) => void |
Optional callback for when a query resolves. |
| onError | (error: Error) => void |
Optional callback for when an error occurs. |
Returns
Exports
import { query } from '@apollo-elements/hybrids/factories/query';