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.

Sign up for GitHub

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

Jump to bottom

load gql from @apollo/client instead of graphql-tag #1503

Closed
wants to merge 1 commit into from
Closed

load gql from @apollo/client instead of graphql-tag #1503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/docs/src/api/apollo-mutation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ See [refetching queries after mutation](https://www.apollographql.com/docs/react
</template>

<script>
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
computed: {
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/guide-advanced/local-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Now we're ready to add an `Item` type to our local GraphQL schema.
```js
//main.js

import gql from 'graphql-tag';
import { gql } from '@apollo/client';

export const typeDefs = gql`
type Item {
Expand Down Expand Up @@ -151,7 +151,7 @@ Querying local cache is very similar to [sending GraphQL queries to remote serve
```js
// App.vue

import gql from 'graphql-tag';
import { gql } from '@apollo/client';

const todoItemsQuery = gql`
{
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/src/guide-components/query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ We want to extract all the fields in `messages` of the `Message` type into a fra
First import the `gql` tag in the component:

```js
import gql from 'graphql-tag'
import { gql } from '@apollo/client'
```

Then, inside the component definition, declare a new `fragments` object:
Expand Down Expand Up @@ -356,7 +356,7 @@ Here is the full example component:
```vue
<!-- MessageList.vue -->
<script>
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
fragments: {
Expand Down Expand Up @@ -398,7 +398,7 @@ Now we can retrieve the `message` fragment in another component:
```vue
<!-- MessageForm.vue -->
<script>
import gql from 'graphql-tag'
import { gql } from '@apollo/client'
import MessageList from './MessageList.vue'

export default {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/guide-composable/fragments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ The most straightforward use of fragments is to reuse parts of queries (or mutat
To do so, we can simply share a fragment describing the fields we need for a comment:

```js
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export const commentFragment = {
comment: gql`
Expand Down
12 changes: 6 additions & 6 deletions packages/docs/src/guide-composable/mutation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ You can use `useMutation` in your `setup` option by passing it a GraphQL documen
```vue{3,7-13}
<script>
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand All @@ -46,7 +46,7 @@ It's generally a good idea to rename the `mutate` function into something more e
```vue{7}
<script>
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand All @@ -67,7 +67,7 @@ We can now use it in our template by passing variables to `mutate` (now called `
```vue{15-17,22-28}
<script>
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -216,7 +216,7 @@ Our component now looks like:
<script>
import { ref } from 'vue'
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -314,7 +314,7 @@ For example, our `sendMessage` mutation should add the new message to our cache:
```vue{33-43}
<script>
import { useQuery, useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

const MESSAGES = gql`
query getMessages {
Expand Down Expand Up @@ -499,7 +499,7 @@ In our example, this is very useful for resetting the message input:
```vue{22,46-48}
<script>
import { useQuery, useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

const MESSAGES = gql`
query getMessages {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/guide-composable/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Let's take this example query loading a feed of potentially infinite number of p
```vue
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

const FEED_QUERY = gql`
query getFeed ($type: FeedType!, $offset: Int, $limit: Int) {
Expand Down
18 changes: 9 additions & 9 deletions packages/docs/src/guide-composable/query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ You can use `useQuery` in your `setup` option and pass it a GraphQL document as
```vue{3,7-16}
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand All @@ -131,7 +131,7 @@ If you want to directly access the data object, use `result.value`:
<script>
import { watch } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -160,7 +160,7 @@ In this example, you could also watch the `Ref` directly:
<script>
import { watch } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -188,7 +188,7 @@ Let's expose our result in the template:
```vue{18-20,25-31}
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -237,7 +237,7 @@ We can use a `computed` prop to simplify access to part of the result and to pro
<script>
import { computed } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -279,7 +279,7 @@ Alongside `result`, `useQuery` returns `loading`, a boolean `Ref` tracking the l
```vue{7,20,27,29}
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -320,7 +320,7 @@ There is also an `error` `Ref` that holds any error that may occur during the re
```vue{7,21,30}
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -658,7 +658,7 @@ This is done using the `refetch` function:
```vue{7,24,40}
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -783,7 +783,7 @@ Example:
```vue{4,8,16,27}
<script>
import { computed } from 'vue'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'
import { useLazyQuery } from '@vue/apollo-composable'

export default {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/guide-option/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Example:
</template>

<script>
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

const pageSize = 10

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/guide-option/queries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Smart Queries are wrappers around GraphQL queries with additional features like
Use `gql` to write your GraphQL queries:

```js
import gql from 'graphql-tag'
import { gql } from '@apollo/client'
```

Put the [gql](https://github.com/apollographql/graphql-tag) query directly as the value:
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/guide/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ Then you can skip to next section: [Basic Usage](../guide-option/usage.md).
## Manual installation

```shell
npm install --save graphql graphql-tag @apollo/client
npm install --save graphql @apollo/client
```

Or:

```shell
yarn add graphql graphql-tag @apollo/client
yarn add graphql @apollo/client
```

In your app, create an `ApolloClient` instance:
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/zh-cn/api/apollo-mutation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export default {
</template>

<script>
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
computed: {
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/zh-cn/guide-advanced/local-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
```js
//main.js

import gql from 'graphql-tag';
import { gql } from '@apollo/client';

export const typeDefs = gql`
type Item {
Expand Down Expand Up @@ -147,7 +147,7 @@ cache.writeData({
```js
// App.vue

import gql from 'graphql-tag';
import { gql } from '@apollo/client';

const todoItemsQuery = gql`
{
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/src/zh-cn/guide-components/query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ query GetMessages {
首先将 `gql` 标签导入组件：

```js
import gql from 'graphql-tag'
import { gql } from '@apollo/client'
```

然后，在组件定义中，声明一个新的 `fragments` 对象：
Expand Down Expand Up @@ -357,7 +357,7 @@ fragment message on Message {
```vue
<!-- MessageList.vue -->
<script>
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
fragments: {
Expand Down Expand Up @@ -399,7 +399,7 @@ export default {
```vue
<!-- MessageForm.vue -->
<script>
import gql from 'graphql-tag'
import { gql } from '@apollo/client'
import MessageList from './MessageList.vue'

export default {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/zh-cn/guide-composable/fragments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ query GetPerson {
为此，我们可以简单地共享一个片段，来描述我们在评论中需要的字段：

```js
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export const commentFragment = {
comment: gql`
Expand Down
12 changes: 6 additions & 6 deletions packages/docs/src/zh-cn/guide-composable/mutation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default {
```vue{3,7-13}
<script>
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand All @@ -46,7 +46,7 @@ export default {
```vue{7}
<script>
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand All @@ -67,7 +67,7 @@ export default {
```vue{15-17,22-28}
<script>
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -215,7 +215,7 @@ sendMessage()
<script>
import { ref } from 'vue'
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

export default {
setup () {
Expand Down Expand Up @@ -313,7 +313,7 @@ editMessage()
```vue{33-37}
<script>
import { useQuery, useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

const MESSAGES = gql`
query getMessages {
Expand Down Expand Up @@ -482,7 +482,7 @@ onDone(result => {
```vue{22,40-42,55}
<script>
import { useQuery, useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

const MESSAGES = gql`
query getMessages {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/zh-cn/guide-composable/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const { fetchMore } = useQuery(...)
```vue
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { gql } from '@apollo/client'

const FEED_QUERY = gql`
query getFeed ($type: FeedType!, $offset: Int, $limit: Int) {
Expand Down
Loading
Loading