Introducing the Qwik GraphQL Client - the coolest cat on the block when it comes to consuming GraphQL APIs! This package is the ultimate wingman for your Qwik projects, giving you all the tools you need to easily retrieve data from GraphQL servers
npm install qwik-graphql-clientSimple GraphQL client and hook for Qwik applications build upon Apollo Client.

- Highlights
- Installation
- Qwik Start
- Examples
- Provide Context To Entire Application
- Using a Client Without the Context Provider
- Using useLazyQuery
- Passing in default headers and middleware to the client
- Enabling Apollo Client Devtools
- Limitations
- Contributing
- Contributors
- Simple GraphQL client for Qwik applications.
- Built on top of the Apollo Client core.
- Fully typesafe with GraphQL Typed Document Nodes.
- Creates one reusable GraphQL client per application.
- Built in useQuery hook to simplify GraphQL requests in Qwik.
- Works seamlessly with Qwik's component.
- Reactive to variables passed into the query.
``sh`
npm add qwik-graphql-client
`sh`
pnpm add qwik-graphql-client
`sh`
yarn add qwik-graphql-client
Provide a GraphQL client context to child components. The context will be used by hooks to make GraphQL requests. To reuse your client throughout your entire application you can provide it in the root component as shown here.
`tsx
import {
GraphQLClientProvider,
ApolloClient,
InMemoryCache,
} from "qwik-graphql-client";
export default component$(() => {
return (
() =>
new ApolloClient({
cache: new InMemoryCache(),
uri: "http://localhost:2003/graphql",
})
)}
>
);
});
`
Then in child components you can use the useQuery hook to make GraphQL requests and consume them using Qwik's component.
`tsx
import { useQuery, gql } from "qwik-graphql-client";
export default component$(() => {
const variables = useStore({
artistID: "1",
});
const artist = useQuery(
gql
query GetArtist($artistID: ID!) {
artist(artistID: $artistID) {
stageName
name
}
}
,
variables
);
return (
onResolved={(value) =>
{artist.stageName}}Examples
$3
To reuse your client throughout your entire application you can provide it in the root component.
`tsx
import {
GraphQLClientProvider,
ApolloClient,
InMemoryCache,
} from "qwik-graphql-client";export default component$(() => {
return (
...
clientGenerator$={$(
() =>
new ApolloClient({
cache: new InMemoryCache(),
uri: "http://localhost:2003/graphql",
})
)}
>
);
});
`$3
You can use a GraphQL a separate client independently of the context provider by passing a
clientGenerator$ function into hooks. Note: This only works with useLazyQuery and useMutation hooks.`tsx
import {
QwikGraphQLClient,
ApolloClient,
InMemoryCache,
} from "qwik-graphql-client";export const useHero = (artistID: string) => {
return useLazyQuery(
gql
,
{ artistID },
{
clientGenerator$: $(
() =>
new ApolloClient({
cache: new InMemoryCache(),
uri: "http://localhost:2003/graphql",
})
),
}
);
};
`$3
The
useLazyQuery hook is also available to use. It works the same as the useQuery hook except it does not automatically execute the query. Instead it returns a function that can be called to execute the query.`tsx
import { useLazyQuery, gql } from "qwik-graphql-client";export default component$(() => {
const {executeQuery$, data} = useLazyQuery(
gql
,
{ artistID: "1" }
); return (
value={data}
onResolved={(value) => {value.stageName}}
onPending={...}
onRejected={...}
/>
})
`$3
The
useMutation hook allows creating mutations to graphql servers. It works the similar to the useLazyQuery hook in that it returns a function that can be called to execute the mutation.`tsx
import { useLazyQuery, gql } from "qwik-graphql-client";export default component$(() => {
const variables = useStore({
name: "Stefani Joanne Angelina Germanotta",
stageName: "Lady Gaga"
})
const {executeQuery$, data} = useLazyQuery(
gql
,
); return (
value={data}
onResolved={(value) => {value.name}}
onPending={...}
onRejected={...}
/>
})
`$3
You can pass in default headers and middleware that will be sent with every request in the useQuery hook.
`tsx
import {
GraphQLClientProvider,
ApolloClient,
InMemoryCache,
HttpLink,
ApolloLink,
concat,
} from "qwik-graphql-client";export default component$(() => {
const clientGenerator$ = $(() => {
const httpLink = new HttpLink({
uri: "http://localhost:2003/graphql",
});
const requestMiddleware = new ApolloLink((operation, forward) => {
console.log("request", operation);
return forward(operation);
});
const responseMiddleware = new ApolloLink((operation, forward) => {
console.log("response", operation);
return forward(operation);
});
return new ApolloClient({
cache: new InMemoryCache(),
link: requestMiddleware.concat(concat(middleware, httpLink)),
headers: {
Authorization: "Bearer 123",
},
});
});
return (
);
});
`$3
To enable linking to the Apollo Client Devtools browser extension (Chrome, Firefox), add the following line to the Apollo Client returned from the
clientGenerator$.`tsx
new ApolloClient({
// Enable in development only.
connectToDevTools: import.meta.env.DEV,
// Enable always.
connectToDevTools: true,
...
});
``While this library is built on top of Apollo Client Core and the Apollo Client docs can be used for further documentation, this package does not support all of the features and some features are likely not to work as expected. This is very much a work in progress. If you find a bug or would like to see a feature added please open an issue or create a pull request.
Contributions are welcome and appreciated, please open an issue and/or create a pull request.