Data/query being cached in two different components (gql)

[buskerone]

Hi everyone 👋 !

The problem
I have a gql query that is being used in two different components with different arguments and in my second component is showing the data that was fetched in the first component. So I assume that the query is being cached.

Question
Am I doing something wrong or is this a normal behaviour of SWR?

Query:

import { gql } from "graphql-request"

// Get data from table
export const getTableData = gql`
  query (
    $genericSearchBoxTable: String!,
    $genericSearchBoxColumn: String,
    $genericSearchBoxValue: String,
    $genericSearchBoxSizeOfPage: Int,
    $genericSearchBoxPage: Int
  ) {
    genericSearchBox(
      table: $genericSearchBoxTable,
      column: $genericSearchBoxColumn,
      value: $genericSearchBoxValue,
      sizeOfPage: $genericSearchBoxSizeOfPage,
      page: $genericSearchBoxPage
    ) {
      response
    }
  }
`

Component 1:

import { getTableData } from "@queries/generic"

const fetcher = (query: any) => request(gqlUrl, query, {
  "genericSearchBoxTable": "AnotherTableName"
}).then((data: any) => ({
  items: data,
  count: 10
}))
...
const { data, isValidating } = useSWR(getTableData, fetcher)
...

Component 2:

import { getTableData } from "@queries/generic"

const fetcher = (query: any) => request(gqlUrl, query, {
  "genericSearchBoxTable": "TableName",
  "genericSearchBoxColumn": "ColumnName",
  "genericSearchBoxValue": "Value",
  "genericSearchBoxSizeOfPage": 50,
  "genericSearchBoxPage": 0
}).then((data: any) => ({
  items: data,
  count: 10
}))
...
const { data, isValidating } = useSWR(getTableData, fetcher)
...

[shuding]

SWR uses the key as identifier of the resource, and you are passing the same key (getTableData) in both places so it's expected to be treated as the same resource. I think you can pass multiple arguments as the key instead.

[buskerone]

Thank you, this makes totally sense!
I'm passing a new argument for the query name, so now everything is working fine.

export const getTableData = (name: string): string => gql`
  query ${name} (
    $genericSearchBoxTable: String!,
    $genericSearchBoxColumn: String,
    $genericSearchBoxValue: String,
    $genericSearchBoxSizeOfPage: Int,
    $genericSearchBoxPage: Int
  ) {
    genericSearchBox(
      table: $genericSearchBoxTable,
      column: $genericSearchBoxColumn,
      value: $genericSearchBoxValue,
      sizeOfPage: $genericSearchBoxSizeOfPage,
      page: $genericSearchBoxPage
    ) {
      response
    }
  }
`